我有多個不同的數值，例如：
<span class="getPtsValue">20</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">225</span>
<span class="getPtsValue">100</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">60</span>
我想將所有具有“0”紅色的跨度和所有數字大于 100 的跨度著色為藍色。
$(document).ready(function() {
var getPtsValue = $('.getPtsValue').html(); // = 1
if (getPtsValue == 0){
$('.getPtsValue').addClass("text-red");
}
if (getPtsValue > '100'){
$('.getPtsValue').addClass("text-blue");
}
});
問題是，我的代碼將所有具有“getPtsValue”類的跨度更改為藍色。如何僅將顏色更改應用于值為 0 到紅色的跨度和值為 100 或更大到藍色的跨度？
uj5u.com熱心網友回復：
在 DOM Ready 獲取跨度，迭代它們并將文本轉換為intwith parseInt，如果值不是NaN并且滿足條件，則添加適合顏色的 className
$(document).ready(function() {
$('.getPtsValue').each(function() {
const val = parseInt($(this).text());
if(!isNaN(val) && val === 0){
$(this).addClass("text-red");
} else if(!isNaN(val) && val >= 100) {
$(this).addClass("text-blue");
}
});
});.text-red {
color:red;
}
.text-blue {
color:blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="getPtsValue">20</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">225</span>
<span class="getPtsValue">100</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">60</span>uj5u.com熱心網友回復：
考慮以下。
$(function() {
$(".getPtsValue").each(function(i, el) {
var point = parseInt($(el).text().trim());
if (point == 0) {
$(el).addClass("red");
} else if (point > 100) {
$(el).addClass("blue");
}
});
});.red {
color: red;
}
.blue {
color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="getPtsValue">20</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">225</span>
<span class="getPtsValue">100</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">60</span>這利用.each()which 將迭代每個元素。
https://api.jquery.com/each/
描述：遍歷一個 jQuery 物件，為每個匹配的元素執行一個函式。
確保我們將數字與數字進行比較。當我們得到.html()or.text()時，它將是一個字串。我們可以使用parseInt()將其轉換為整數。
然后我們使用.addClass()給元素添加一個類名。這可以是您想要的任何值，我剛剛使用了redand blue。
uj5u.com熱心網友回復：
$(function() {
$("span.getPtsValue").each((index, elem) => {
$(elem)
.removeClass()
.addClass( $(elem).text() === 0 ? 'text-red' : 'text-blue');
});
});.text-red {
color: red;
}
.text-blue {
color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="getPtsValue">20</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">225</span>
<span class="getPtsValue">100</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">60</span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/472732.html
標籤：jQuery