Как повесить события на динамический дочерний класс?

Question

[Danya Kozlovskiy]

Необходимо сделать так, чтобы при клике на class2 менялся class3 на class4 и наоборот с class4 на class3. Пытался сделать, но меняется только с class3 на class4, а обратно не реагирует.

<div class="class1">
  <div class="class2"></div>
  <div class="class3"></div>
</div>

<div class="class1">
  <div class="class2"></div>
  <div class="class3"></div>
</div>

<div class="class1">
  <div class="class2"></div>
  <div class="class3"></div>
</div>

Answer 1

[0xD34F]

Куда надо нажимать и какие классы переключать:

const buttonSelector = '.class2';
const classesToToggle = [ 'class3', 'class4' ];

Переключаем:

$(buttonSelector).click(e => {
  $(e.currentTarget).next().toggleClass(classesToToggle.join(' '));
});

или

document.querySelectorAll(buttonSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick() {
  classesToToggle.forEach(n => this.nextElementSibling.classList.toggle(n));
}

или

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    for (const n of classesToToggle) {
      button.parentNode.lastElementChild.classList.toggle(n);
    }
  }
});

Comments

[Danya Kozlovskiy]

0xD34F, я конечно всё понимаю, но почему вы убрали тег JavaScript, если мне решение написанное на нативном тоже подходит?)

[0xD34F]

Если всё понимаете - зачем тогда спрашиваете?

Добавил варианты без jquery.