Убрать/Добавить класс по клику на одну кнопку

Question

У меня есть список, при клике на пункт к нему добавляется класс active. При повторном клике класс убирается и это хорошо. Но если я кликаю на пункт 1, а затем на пункт два, то и он тоже становится зеленым. Ожидаемый результат такой: я кликаю на пункт 1 и он зеленеет. Я кликаю на него ешё раз он чернеет. Я снова кликаю на 1 он зеленеет, кликаю на второй или третий пункт все чернеют, кроме нажатого. Короче говоря, чтобы при клике был зеленый только один пункт.

$('.item-li').on('click', function(){
  $(this).toggleClass('active');
});

.item-li{
  background-color:black;
  width:100px;
  height:20px;
  margin: 10px;
  border-radius:10px;
}

.active{
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item-li" data-id="1">1</li>
<li class="item-li" data-id="2">1</li>
<li class="item-li" data-id="3">1</li>
</ul>

Answer 1

$('.item-li').on('click', function(e) {
  e.preventDefault();
  var data = $(this).attr('data-id');

  if ($('.item-li[data-id=' + data + ']').hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $('.item-li').removeClass('active');

    $(this).addClass('active');
  }
});

.item-li{
  background-color:black;
  width:100px;
  height:20px;
  margin: 10px;
  border-radius:10px;
}

.active{
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item-li" data-id="1">1</li>
<li class="item-li" data-id="2">1</li>
<li class="item-li" data-id="3">1</li>
</ul>

Answer 2


$('.item-li').on('click', function(){
    if ($(".item-li").hasClass("active")) {
        $(this).removeClass("active");
    } else {
        $(this).addClass("active");
    }
  });

Мы проверяем, есть ли у элемента класс «active», если он есть, мы удаляем класс «active», иначе добавляем этот класс. Надеюсь, я помог вам

Answer 3

Можно без проверок сделать так:

$('.item-li').click((e) => {
    $(".item-li").removeClass("active");
    e.target.classList.add('active');
});

БЛОГ НА HUSL

Убрать/Добавить класс по клику на одну кнопку

Ответы (3 шт):