1

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

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

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

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

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

3
  • toggleClass сработает в том случае, если я повторно щелкну на один и тот же элемент.. Или я не прав ?
    – steam.apk2
    18 мар 2020 в 11:11
  • 1
    $('.list_child').removeClass('iset_active'); $(this).addClass('iset_active'); — удалить со всех, добавить этому) 18 мар 2020 в 11:11
  • @OPTIMUSPRIME черт возьми..испробовал кучу всего, а такое простое в голову не пришло..спасибо )) Стоит сделать это ответом, думаю )
    – steam.apk2
    18 мар 2020 в 11:13

1 ответ 1

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, её содержимое будет храниться в памяти. А так - она используется, чтобы повесить обработчики клика и стирается. Вот после клика, когда нужны будут элементы - можно снова их собрать, использовать, и забыть до следующего клика.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.