Как добавить класс дочернему элементу при клике на родителя, если родительских элементов на странице несколько? JS
На странице повторяющиеся элементы. Как сделать, чтобы при клике на родителя, добавлялся класс только !его дочернему элементу, а не всем дочерним элементам?
<div class="parent">
<div class="child">1</div>
<div/>
<div class="parent">
<div class="child">2</div>
<div/>
<div class="parent">
<div class="child">3</div>
<div/>
Кликаем на parent и добавляем класс к child, который является ребенком parent на который кликнули. На JavaScript.
Ответы (1 шт):
Автор решения: Gene Erbin
→ Ссылка
document.querySelectorAll(".parent").forEach((elem) => {
elem.addEventListener("click", function(){
this.querySelector(".child").classList.add("active");
});
});.child.active {
color: red;
}
.child.active::after {
content: " На моего родителя кликнули";
}<div class="parent">
<div class="child">1</div>
</div>
<div class="parent">
<div class="child">2</div>
</div>
<div class="parent">
<div class="child">3</div>
</div>