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

Question

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

设置相应元素的样式

$(".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 元素，因此您需要遍历每个元素并使用 class number

span

您需要找到相应 .item 元素的 .number 元素，以便仅更改该 .number 元素的 color。
因为它是一个 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>

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

Change color of multiple items based on the data attribute

javascript

jquery

loops

custom-data-attribute