Как при нажатии на элемент добавить класс другому элементу?

Question

Есть такой незатейливый слайдер. Как при нажатии на элемент "i-play" добавлять класс элементу "p", в каждом слайде, независимо друг от друга?

document.querySelectorAll(".i-play").forEach((el) => {
      el.addEventListener("click", function () {
        document.querySelector(".slide p").classList.add("show");
      });
    });

.i-play {
cursor: pointer;
}

p {
display: none;
}

p.show {
display: block;
}

<ul class="slider">
    <li class="slide">
        <div class="i-play">х</div>
        <p>Простот текст</p>
    </li>

    <li class="slide">
        <div class="i-play">х</div>
        <p>Простот текст</p>
    </li>

    <li class="slide">
        <div class="i-play">х</div>
        <p>Простот текст</p>
    </li>
</ul>

Я думал, как-то так, но срабатывает только 1й слайд, в остальных слайдах при нажатии "i-play" ничего не происходит. Я так понимаю, что тут должна быть конструкция event.target, но как ее привязать сюда не понимаю.

Answer 1

Как при нажатии на элемент "i-play" добавлять класс элементу "p", в каждом слайде, независимо друг от друга?

Например можно использовать делегирование событий...

document.querySelector(".slider").addEventListener("click", function(e) {
  const o = e.target
  if (!o.classList.contains('i-play')) return
  o.closest('.slide').querySelector("p").classList.add("show");
});

.i-play {
  cursor: pointer;
}

p {
  display: none;
}

p.show {
  display: block;
}

<ul class="slider">
  <li class="slide">
    <div class="i-play">х</div>
    <p>Простот текст</p>
  </li>

  <li class="slide">
    <div class="i-play">х</div>
    <p>Простот текст</p>
  </li>

  <li class="slide">
    <div class="i-play">х</div>
    <p>Простот текст</p>
  </li>
</ul>

Answer 2

У Вас практически все правильно. Единственное, что в обработчике вы не учитываете контекст ГДЕ Вы нажимаете. Чуть-чуть поправим.

document.querySelector(".slide p") возвращает ПЕРВЫЙ попавшийся на странице блок, удовлевтворяющий условию отбора. Именно поэтому срабатывал только первый слайд.

В исправленном скрипте мы просто обращаемся к следующему элементу после выбранного.

document.querySelectorAll(".i-play").forEach((el) => {
      el.addEventListener("click", function () {
        el.nextElementSibling.classList.add("show");
      });
    });

.i-play {
cursor: pointer;
}

p {
display: none;
}

p.show {
display: block;
}

<ul class="slider">
    <li class="slide">
        <div class="i-play">х</div>
        <p>Простот текст</p>
    </li>

    <li class="slide">
        <div class="i-play">х</div>
        <p>Простот текст</p>
    </li>

    <li class="slide">
        <div class="i-play">х</div>
        <p>Простот текст</p>
    </li>
</ul>

БЛОГ НА HUSL

Как при нажатии на элемент добавить класс другому элементу?

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