时间戳

首页 > 解决方案 > 如何只允许一个具有特定类的元素

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

问题描述

我有几个可以onclick触发功能的 div。我想让它在单击时单击刚刚单击的 div 具有 class .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>

标签： javascripthtmlcss

解决方案

问题是您只从该行中匹配的第 0selected个元素中删除该类：

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

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

您也许应该forEach对 , 选择的元素进行迭代getElementsByClassName('c')，以从每个元素中删除selected该类，而不仅仅是第 0 个。

推荐阅读