Изменение класса у дочернего элемента при клике на родительский элемент

Question

Есть список состоящий из элементов с именами, при нажатии на какой-либо элемент он перемещается в заданную точку и увеличивается в размерах, а после в нём появляется информация.

Для осуществления я использую делегирование в JS, всё работает хорошо, но только с 1 элементом. У других элементов не появляется информация, потому что класс изменяется только у первого дочернего элемента с классом info.

(Класс member-active отвечает за перемещение и изменение размеров у элемента с классом member)

Как бы я не старался, я не смог сделать так, чтобы при клике на любой элемент с классом member его дочерний элемент менял класс info на info-active.

Каким образом это можно сделать? (Желательно без JQuery)

members.addEventListener('click', function(event) {
  if (event.target.matches('.member')) {
    event.target.classList.toggle('member-active');
    info.classList.toggle('info-active');
    info.classList.toggle('info');
  }
});

<div class="members">

  <div class="member left-member-1">
    <p class="name">Имя</p>
    <p class="info">Информация</p>
  </div>

  <div class="member left-member-2">
    <p class="name">Имя</p>
    <p class="info info-left-2">Информация</p>
  </div>
  
</div>

Answer 1

members.addEventListener('click', function(event) {
  if (event.target.matches('.member')) {
    event.target.classList.toggle('member-active');
    var info = event.target.querySelector('.info'); // !!!
    info.classList.toggle('info-active');
    //info.classList.toggle('info');
  }
});

БЛОГ НА HUSL

Изменение класса у дочернего элемента при клике на родительский элемент

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