根据数据属性更改多个项目的颜色

Question

所以有三个项目，with属性为data-fill，每个项目都有一个跨度，类为.number。如果值小于 20，则项目应为黑色，否则应为红色。任何想法如何使它们进入某种循环，以便它单独针对每个项目..？

if($(".item").attr('data-fill') < 20) {
$(".number").css("color", "black");
}

.number {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" data-fill="19">
<span class="number">20</span>
</div>
<div class="item" data-fill="40">
<span class="number">40</span>
</div>
<div class="item" data-fill="30">
<span class="number">30</span>
</div>

Answer 1

您需要遍历元素并使用number类设置相应的元素样式。

$(".item").each(function() {
if ($(this).attr('data-fill') < 20) {
$(this).find(".number").css("color", "black");
}
});

.number {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" data-fill="19">
<span class="number">20</span>
</div>
<div class="item" data-fill="40">
<span class="number">40</span>
</div>
<div class="item" data-fill="30">
<span class="number">30</span>
</div>

Answer 2

为此，您需要记住几件事：

1. 有多个.item元素，因此您需要遍历每个元素并使用类number检查span的值
2. 您需要找到相应.item元素的.number元素，以便仅更改该.number元素的color。
3. 由于它是一个data属性，因此您可以使用.data()而不是.attr()：

var elem = $(".item");
$(elem).each(function(){
if($(this).data('fill') < 20){
$(this).find(".number").css("color", "black");
}
});

.number {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" data-fill="19">
<span class="number">19</span>
</div>
<div class="item" data-fill="40">
<span class="number">40</span>
</div>
<div class="item" data-fill="30">
<span class="number">30</span>
</div>
<div class="item" data-fill="12">
<span class="number">12</span>
</div>

Answer 3

你可以使用 filter(( 来做到这一点：

$('.item').filter(function() {
return $(this).data('fill') < 20;
}).find('.number').css('color', 'black');

.number {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" data-fill="19">
<span class="number">20</span>
</div>
<div class="item" data-fill="40">
<span class="number">40</span>
</div>
<div class="item" data-fill="30">
<span class="number">30</span>
</div>

Answer 4

或者，可以在没有JavaScript的情况下通过CSS执行此操作

.number {
color: red;
}
.item[data-fill^="1"]:not([data-fill="100"]) .number,
.item[data-fill="2"] .number,
.item[data-fill="3"] .number,
.item[data-fill="4"] .number,
.item[data-fill="5"] .number,
.item[data-fill="6"] .number,
.item[data-fill="7"] .number,
.item[data-fill="8"] .number,
.item[data-fill="9"] .number {
color: black;
}

<div class="item" data-fill="19">
<span class="number">19</span>
</div>
<div class="item" data-fill="40">
<span class="number">40</span>
</div>
<div class="item" data-fill="30">
<span class="number">30</span>
</div>