Переключение класса в jquery

Question

Подскажите, как корректно средствами jquery переключать классы у div'ов с одним и тем же классом ?

Поясняю. Есть div с классом list. Внутрь него по циклу вкладываются еще несколько div'ов с классом list_child.

Я использую следующий код, чтобы выделять сами блоки -

$('.list_child').click(function() {
    $(this).addClass('iset_active');
});

Необходимо сделать так, чтобы если бы я щелкнул на другой див с таким же классом, то у предыдущего ремувнулся класс iset_active.

Answer 1

Удалить класс со всех элементов, добавить кликнутому)

$('.list_child').on("click", function() {
  $('.list_child').removeClass('iset_active');
  $(this).addClass('iset_active');
});

Ну и перевод на JS, ради приличия:

let listChild = document.querySelectorAll('.list_child');
for( let i = 0; i < listChild.length; i++ ){
  listChild[i].addEventListener('click', function(){
    let list = all('.list_child'); // (*1)
    handleClass(list, 'remove', 'iset_active');
    handleClass(this, 'add', 'iset_active');
  });
}

/***/

function all(selector){ return document.querySelectorAll(selector); }

function handleClass(elems, action, className) {
  if( elems instanceof HTMLElement ) {
    return elems.classList[action](className);
  }
  
  for( var i = 0; i < elems.length; i++ ){
    elems[i].classList[action](className);
  }
}

.list_child { display: inline-block; width: 100px; height: 100px; background: orange; cursor: pointer; }

.list_child.iset_active { background: #045acf; }

<div class="list_child"></div>
<div class="list_child"></div>
<div class="list_child"></div>
<div class="list_child"></div>
<div class="list_child"></div>

(*1) Разница между использованием уже созданного listChild и заново собранным списком... Если функция будет ссылаться на переменную listChild, её содержимое будет храниться в памяти. А так - она используется, чтобы повесить обработчики клика и стирается. Вот после клика, когда нужны будут элементы - можно снова их собрать, использовать, и забыть до следующего клика.

БЛОГ НА HUSL

Переключение класса в jquery

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