我有一些 onclick
触发功能的 div。我想让它在单击时,刚刚单击的 div 具有 .selected
类。然后我希望它是当您单击另一个元素时,.selected
类从另一个元素中删除,然后应用于新元素。当我单击第一个然后单击稍后出现的一个时,它工作正常。当我单击最后一个,然后单击它之前的一个时,它就会保留下来。我做错了什么?
function choosediv(element){
if(document.querySelectorAll('.selected').length != 0){
document.getElementsByClassName('c')[0].classList.remove('selected');
}
element.classList.add('selected');
}
.c{
background-color: pink;
cursor: pointer;
}
.selected{
background-color: red;
}
<div class="c" onclick="choosediv(this)">Click me</div>
<div class="c" onclick="choosediv(this)">Click me</div>
<div class="c" onclick="choosediv(this)">Click me</div>
最佳答案
问题是您只是从该行中匹配的 0th 元素中删除 selected
类:
document.getElementsByClassName('c')[0].classList.remove('selected');
通过选择 getElementsByClassName('c')[0]
返回的数组的第 0 个元素,每个选择的 div
not 在索引处0 将保持选中状态。
您或许应该对 getElementsByClassName('c')
选择的元素使用 forEach
迭代,以删除 selected
类来自每一个,而不仅仅是第 0 个。
关于javascript - 如何只允许一个具有特定类的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57878224/