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

Question

Samantha

javascript

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

Как можно добавить класс к элементу "p" в каждом слайде при нажатии на элемент "i-play", чтобы это происходило независимо для каждого слайда? <br/> <br/> <pre><code class="html">&lt;ul class="slider"&gt;
	&lt;li class="slide"&gt;
		&lt;div class="i-play"&gt;&lt;/div&gt;
		&lt;p&gt;Простот текст&lt;/p&gt;
	&lt;/li&gt;

	&lt;li class="slide"&gt;
		&lt;div class="i-play"&gt;&lt;/div&gt;
		&lt;p&gt;Простот текст&lt;/p&gt;
	&lt;/li&gt;

	&lt;li class="slide"&gt;
		&lt;div class="i-play"&gt;&lt;/div&gt;
		&lt;p&gt;Простот текст&lt;/p&gt;
	&lt;/li&gt;
&lt;/ul&gt;</code></pre> <br/> <br/> Я пробовал реализовать это следующим образом: <br/> <br/> <pre><code class="javascript">document.querySelectorAll(".i-play").forEach((el) =&gt; {
      el.addEventListener("click", function () {
        document.querySelector(".slide p").classList.add("show");
      });
    });</code></pre> <br/> <br/> Однако при использовании этого кода срабатывает только первый слайд.

25 сентября 2024 г. 21:03

Ответы на вопрос 2

Похожие вопросы

Answer 1

Проблема в вашем коде заключается в том, что вы в каждой итерации добавляете класс "show" только к первому элементу `<p>` в документе, так как `document.querySelector(".slide p")` всегда будет возвращать первый найденный элемент. Вместо этого вам нужно добавить класс только к тому элементу `<p>`, который находится в том же родительском слайде, что и кликнутый элемент `.i-play`. 

Для этого можно использовать `closest` для поиска родительского элемента `<li class="slide">` и затем находить внутри него нужный элемент `<p>`. Вот исправленный код:

```javascript
document.querySelectorAll(".i-play").forEach((el) => {
  el.addEventListener("click", function () {
    const slide = el.closest(".slide"); // Найти родительский элемент slide
    const p = slide.querySelector("p"); // Найти p внутри этого slide
    p.classList.add("show"); // Добавить класс show к найденному p
  });
});
```

С помощью этого исправленного кода при нажатии на элемент `.i-play` будет добавляться класс `show` только к тому элементу `<p>`, который находится внутри слайда, на который был произведён клик.

Answer 2

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