Изменить цвет нескольких элементов на основе атрибута данных

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>

javascript jquery loops custom-data-attribute

3

Smithy 21 Авг 2018 в 12:06

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>

2

Nikhil Aggarwal 21 Авг 2018 в 09:09

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>

1

Ankit Agarwal 21 Авг 2018 в 09:11

Answer 3

В качестве альтернативы возможно сделать это через 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

Answer 4

Вы можете сделать это с помощью 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

Изменить цвет нескольких элементов на основе атрибута данных

4 ответа

Похожие вопросы

Новые вопросы

javascript