Таким образом, есть три элемента с атрибутом 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>
3
Smithy 21 Авг 2018 в 12:06

4 ответа

Лучший ответ

Вам необходимо перебрать элементы и стилизовать соответствующий элемент с помощью класса 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>
2
Nikhil Aggarwal 21 Авг 2018 в 09:09

Для этого нужно помнить несколько вещей:

  1. Существует несколько .item элементов, поэтому вам нужно перебрать каждый из них и проверить значение span с помощью класса number
  2. Вам нужно найти элемент .number соответствующего элемента .item, чтобы вы могли изменить только color этого элемента .number.
  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>
1
Ankit Agarwal 21 Авг 2018 в 09:11

В качестве альтернативы возможно сделать это через 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>
1
Roman Maksimov 21 Авг 2018 в 10:20

Вы можете сделать это с помощью 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>
1
billyonecan 21 Авг 2018 в 09:14
51945234