#javascript #class #toggle #addeventlistener
Вопрос:
Я попытался добавить класс в текстовый контейнер, на который я нажимаю, а затем класс присваивает цвет тексту, на который я нажимаю. проблема в том, что когда я дважды нажимаю на один и тот же текст, класс не удаляется. Любое решение для этого случая?
ПОЖАЛУЙСТА, НЕ МЕНЯЙТЕ, ГДЕ НАХОДИТСЯ КЛАСС
const contain = document.querySelector('.contain');
const inConts = document.querySelectorAll('.in-cont');
contain.addEventListener('click', e => {
for (inCont of inConts) {
inCont.classList.remove('red');
}
if (e.target.classList.contains('txt')) {
e.target.parentElement.classList.toggle('red');
}
});
.in-cont.red .txt {
color: red;
}
<div class="contain">
<div class="in-cont">
<p class="txt">Lorem ipsum dolor sit.</p>
</div>
<div class="in-cont">
<p class="txt">Lorem ipsum dolor sit.</p>
</div>
<div class="in-cont">
<p class="txt">Lorem ipsum dolor sit.</p>
</div>
</div>
Ответ №1:
Вы можете легко переключать класс red
, используя closest
as:
closest
выполняет поиск в DOM вверх для элемента, который соответствует селектору. Этот поиск включает в себя сам элемент.
element.closest(selector)
Если он находит элемент, соответствующий селектору, он возвращает
элемент. Если он не находит никаких элементов, он возвращаетnull
const contain = document.querySelector('.contain');
const inConts = document.querySelectorAll('.in-cont');
contain.addEventListener('click', e => {
if (e.target.closest("div.contain")) {
e.target.closest("div.in-cont").classList.toggle("red")
}
});
.in-cont.red .txt {
color: red;
}
<div class="contain">
<div class="in-cont">
<p class="txt">Lorem ipsum dolor sit.</p>
</div>
<div class="in-cont">
<p class="txt">Lorem ipsum dolor sit.</p>
</div>
<div class="in-cont">
<p class="txt">Lorem ipsum dolor sit.</p>
</div>
</div>
Ответ №2:
При удалении red
класса проверьте inCont
, содержит ли объект события:
const contain = document.querySelector('.contain');
const inConts = document.querySelectorAll('.in-cont');
contain.addEventListener('click', e => {
for (inCont of inConts) {
if (!inCont.contains(e.target)) {
inCont.classList.remove('red');
}
}
if (e.target.classList.contains('txt')) {
e.target.parentElement.classList.toggle('red');
}
});
.in-cont.red .txt {
color: red;
}
<div class="contain">
<div class="in-cont">
<p class="txt">Lorem ipsum dolor sit.</p>
</div>
<div class="in-cont">
<p class="txt">Lorem ipsum dolor sit.</p>
</div>
<div class="in-cont">
<p class="txt">Lorem ipsum dolor sit.</p>
</div>
</div>
Комментарии:
1. Это работает. Но я не понимаю! inCont.contains(например,target)
2. не содержит просто проверки, существует ли класс или нет?
3. @ShaefulAmin
contains
проверяет, является ли элемент дочерним элементом элемента или самим элементом.