我尝试向我单击的文本容器添加一个类,然后该类为我单击的文本分配颜色。问题是当我单击相同的文本两次时,该类不会被删除。这种情况有什么解决办法吗?
请不要更改类(class)的位置
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>
最佳答案
您可以使用closest
轻松切换类red
如:
closest
searches the DOM upwards for an element that matches the selector. This search includes the element itself.
element.closest(selector)
If it finds an element that matches the selector, it returns the element. If it doesn’t find any elements, it returns
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>
关于javascript - 我无法删除给容器的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69937479/