javascript - 如何只允许一个具有特定类的元素

Question

我有一些 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>

Answer 1

问题是您只是从该行中匹配的 0th 元素中删除 selected 类:

document.getElementsByClassName('c')[0].classList.remove('selected');

通过选择 getElementsByClassName('c')[0] 返回的数组的第 0 个元素，每个选择的 div not 在索引处0 将保持选中状态。

您或许应该对 getElementsByClassName('c') 选择的元素使用 forEach 迭代，以删除 selected 类来自每一个，而不仅仅是第 0 个。