Javascript только addEventListener для родительского стиля как родительский, так и дочерний по-разному

91
9

В настоящее время есть div, который управляет шириной элемента, а также цветом фона. Этот div имеет дочерний div, который имеет полупрозрачный контент. Вот почему мне нужен первый div. Таким образом, фон твердый.


Теперь я добавил слушателя событий родительскому, который расширяет ширину одного и уменьшает ширину других 2, чтобы они все соответствовали. Однако, когда я нажимаю на родительский div, я хотел бы, чтобы дочерний элемент этого конкретного div добавлял класс и удалял класс из другого 2. Которое я не могу понять. Вот код. Извините, если мое форматирование плохое, первая публикация на переполнение стека, и я googled и искал все для ответа и не могу найти его.


var purchaseStepCont = document.querySelectorAll(".step-container");
var purchaseStep = document.querySelectorAll(".step");

for (var i = 0; i < purchaseStepCont.length; i++) {
purchaseStepCont[i].addEventListener("click", function() {
for (var i = 0; i < purchaseStepCont.length; i++) {
purchaseStepCont[i].classList.remove("stepContActive");
purchaseStepCont[i].classList.add("stepContDeactive");
this.classList.add("stepContActive");
this.classList.remove("stepContDeactive");
}
});
}


<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>

спросил(а) 2021-01-19T20:24:59+03:00 8 месяцев назад
1
Решение
79

Ты очень близко. Но если вы хотите добавить класс в .step, вам нужно this.firstElementChild.classList.add(...), а не this.classList.add(...) (поскольку this будет .step-container, а не .step, но .step является первым элементный ребенок). Или для большей гибкости разметки вы можете использовать this.querySelector(".step").


Вы также можете использовать только одну функцию обработчика событий, а не воссоздавать ее в цикле:


var purchaseStepCont = document.querySelectorAll(".step-container");
var purchaseStep = document.querySelectorAll(".step");
function clickHandler() {
var thisStep = this.firstElementChild; // Or this.querySelector(".step") would be more flexible
for (var i = 0; i < purchaseStep.length; i++) {
if (purchaseStep[i] === thisStep) {
purchaseStep[i].classList.add("stepContActive");
purchaseStep[i].classList.remove("stepContDeactive");
} else {
purchaseStep[i].classList.remove("stepContActive");
purchaseStep[i].classList.add("stepContDeactive");
}
}
}

for (var i = 0; i < purchaseStepCont.length; i++) {
purchaseStepCont[i].addEventListener("click", clickHandler);
}


.stepContActive {
color: blue;
}
.stepContDeactive {
color: #ddd;
}

<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>

clickHandler может быть немного короче, если вам не нужно поддерживать IE11:


function clickHandler() {
var thisStep = this.firstElementChild; // Or this.querySelector(".step") would be more flexible
for (var i = 0; i < purchaseStep.length; i++) {
purchaseStep[i].classList.toggle("stepContActive", purchaseStep[i] === thisStep);
purchaseStep[i].classList.toggle("stepContDeactive", purchaseStep[i] !== thisStep);
}
}

Но IE11 не поддерживает второй аргумент classList.toggle.

ответил(а) 2021-01-19T20:24:59+03:00 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема