Блог

Главная - Вопросы по программированию - Установите цвет элемента списка в зависимости от того, какой переключатель выбран jquery

Установите цвет элемента списка в зависимости от того, какой переключатель выбран jquery

#jquery

Вопрос:

У меня есть группа неупорядоченных элементов списков. Каждый элемент списка имеет атрибут данных с одним из следующих значений: все удаленные активные неактивные

У меня также есть четыре переключателя со следующими значениями все удалены активны неактивны

То, что я застрял, — это установка всех элементов списка выбранного переключателя в один и тот же цвет. Поэтому для удаленных я установил их на «красный», для «активных» я установил их на «зеленый», а для «неактивных» я установил их на «светло-серый».

 $('input[name="test"]').on('change', function() {
  var value = this.value;
  var listValue = $('li').data("status");
  //$('.ul1 >li').hide();
  if (value == 'All') {
    //$('.ul1 >li').show();
    alert('all');
  }
  if (value == 'deleted') {
    $('.ul1 > li').each(function() {
      if (listValue == 'deleted') {
        $('li').css("color", "red")
      }
    });

  }
  if (value == 'active') {
    //$('.ul1 >li').show();
    alert('active');
  }
  if (value == 'inactive') {
    //$('.ul1 >li').show();
    alert('inactive');
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="deleted" name="test"><label>Deleted</label>
<input type="radio" value="active" name="test"><label>Active</label>
<input type="radio" value="inactive" name="test"><label>Inactive</label>

<ul class="ul1">
  <li data-status="deleted">john</li>
  <li data-status="active">mary</li>
  <li data-status="inactive">bob</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">sally</li>
  <li data-status="active">erica</li>
  <li data-status="inactive">jane</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">ted</li>
  <li data-status="active">joan</li>
  <li data-status="inactive">rob</li>
</ul>

Таким образом, если бы был выбран переключатель «Удалить», то цвет текста Джона, Салли и Теда был бы установлен на «красный».

где я ошибаюсь

Спасибо, Джон

Ответ №1:

$('li').data("status") всегда будет возвращать значение первого <li> .

Вам нужно проверить значение каждого из них и соответствующим образом изменить этот экземпляр. Я предлагаю вам использовать классы, а не css (), так как проще добавлять/удалять класс, чем разматывать встроенные изменения css

 $('input[name="test"]').on('change', function() {
  
  var value = this.value;
  
  $('li').each(function(){
     var $li = $(this),
         listValue = $li.data("status"),
         showActive = listValue === value || value === 'All';
         
     $li.toggleClass('active', showActive);  
  });
}); 
 li.active{ color: red} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" value="All" name="test">All</label>
<label><input type="radio" value="deleted" name="test">Deleted</label>
<label><input type="radio" value="active" name="test">Active</label>
<label><input type="radio" value="inactive" name="test">Inactive</label>

<ul class="ul1">
  <li data-status="deleted">john</li>
  <li data-status="active">mary</li>
  <li data-status="inactive">bob</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">sally</li>
  <li data-status="active">erica</li>
  <li data-status="inactive">jane</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">ted</li>
  <li data-status="active">joan</li>
  <li data-status="inactive">rob</li>
</ul>

Ответ №2:

Вы пытались решить эту проблему, взяв их отдельно как 3 разных элемента, в то время как они были очень похожи. Подход гораздо более динамичен, когда вы видите его таким.

  1. Все элементы списка имеют data-status то же значение, что и один из переключателей.
  2. Все значения переключателей соответствуют цвету css.
  3. Возьмите все элементы списка и проверьте их состояние, если оно соответствует текущему отмеченному переключателю, затем окрасьте его в цвет выбранного значения.
 $('input[name="test"]').on('change', function() {
  var value = this.value;
  var colors = [];
  colors['deleted']="red";
  colors['active']="green";
  colors['inactive']="lightgrey";

  $('ul > li').each(function() {
      if ($(this).attr('data-status') == value) {
        $(this).css('color', colors[value]);
      } else {
        $(this).css('color', "black");
      }
    });
 }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="deleted" name="test"><label>Deleted</label>
<input type="radio" value="active" name="test"><label>Active</label>
<input type="radio" value="inactive" name="test"><label>Inactive</label>

<ul class="ul1">
  <li data-status="deleted">john</li>
  <li data-status="active">mary</li>
  <li data-status="inactive">bob</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">sally</li>
  <li data-status="active">erica</li>
  <li data-status="inactive">jane</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">ted</li>
  <li data-status="active">joan</li>
  <li data-status="inactive">rob</li>
</ul>

Комментарии:

1. Ах! Теперь я понимаю. Большое вам спасибо за ваш быстрый ответ. Вы, ребята, отлично справляетесь со своими ответами. Я действительно ценю это.

2. Примите один ответ, чтобы вопрос можно было закрыть.

Ответ №3:

Вы можете просто использовать data-attr в качестве селектора, т. е. : $(".ul1 li[data-status=" listValue "]").addClass(listValue) добавить необходимый класс, в котором listValue выбрано значение переключателя.

Демонстрационный код :

 $('input[name="test"]').on('change', function() {
  var listValue = this.value;
  //remove class if any of these
  $(".ul1 li[data-status]").removeClass("deleted active inactive")
  $(".ul1 li[data-status="   listValue   "]").addClass(listValue) //add class
}); 
 .deleted {
  color: red
}

.active {
  color: green
}

.inactive {
  color: gray
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="deleted" name="test"><label>Deleted</label>
<input type="radio" value="active" name="test"><label>Active</label>
<input type="radio" value="inactive" name="test"><label>Inactive</label>

<ul class="ul1">
  <li data-status="deleted">john</li>
  <li data-status="active">mary</li>
  <li data-status="inactive">bob</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">sally</li>
  <li data-status="active">erica</li>
  <li data-status="inactive">jane</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">ted</li>
  <li data-status="active">joan</li>
  <li data-status="inactive">rob</li>
</ul>
Метки: ,