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

为此，您需要牢记以下几点：

有多个.item元素，因此您需要遍历每个元素，并使用类span检查number的值
您需要找到相应.number元素的.item元素，以便仅更改该color元素的.number。
由于它是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

或者，也可以通过CSS而不使用JavaScript

.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>

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

4 个答案: