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

Question

所以有三个带有data-fill属性的item，每个item都有一个span，class为.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>