Как навесить обработчик на коллекцию элементов 2?

Question

[StrStr]

У меня несколько блоков с одинаковым классом и внутренней кнопкой. Необходимо повесить обработчик на несколько элементов.

const headerArrow = document.querySelector(".work-header-arrow");
      const workDescr = document.querySelector(".descr");

      headerArrow.addEventListener("click", () => {
        headerArrow.classList.toggle("active");
        workDescr.classList.toggle("active");
      });

Понимаю, что querySelectorAll отработает только на первом.
Читал тут решение в ES6, но так и не вкурил.

как правильно?

Comments

[nonconformiste]

const headerArrows = document.querySelectorAll(".work-header-arrow");

for (const headerArrow of headerArrows) {
  headerArrow.addEventListener("click", () => {
  this.event.target.classList.toggle("active");
  });
}

// А для .descr нет смысла прописывать toggle класса .active, если можно влиять на стиль внутреннего блока через класс родителя, типо .work-header-arrow.active .descr {}

Answer 1

[VadimFilimonov]

// Ищем родителей
const works = Array.from(document.querySelectorAll('.works-name'));

// Для каждого из родителей
works.forEach((item) => {
    // Вешаем обработчик
    item.addEventListener('click', (event) => {
        // Если пользователь кликнул именно на кнопку
        if (event.target.classList.contains('.work-header-arrow')) {
            // Меняем класс у самого родителя
            item.classList.toggle("active");
        }
    });
});

Когда у родителя будет нужный класс - с помощью css можно отнаследоваться и сделать что-угодно внутри

Comments

[StrStr]

не хочет работать.
судя по всему из-за того что .work-header-arrow не родитель .descr

<code>
        <div class="works-name">
          <div class="work-header">
            <div class="work-header-title">Тра-та-та</div>
            <a class="work-header-arrow">клик</a>
            <div class="work-header-txt">Тра-та-та</div>
          </div>
          <div class="work">
            <picture>000</picture>
            <div class="descr">
              <div class="descr-date">Тра-та-та</div>
              <div class="descr-txt">Тра-та-та</div>
              <a class="descr-link" href="">Тра-та-та</a>
            </div>
          </div>
</code>

по задумке, есть блок с некой шапкой(внутри которой стрелка/кнопка) и сам блок (картинка).
нажатие стрелки выводит блок с описанием поверх картинки (другого блока)
интересует именно нативный js