如何只允许一个特定类的元素

Question

我有一些div可以onclick触发功能。 我想这样做，以便在单击时刚单击的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

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

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

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

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

Answer 2

您只需从.selected的.c中删除selected类（使用querySelector ，它返回与查询匹配的第一个元素（如果存在），然后返回if ），然后将selected类添加到单击的element中：

 .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> <script> function choosediv(element) { var curr_sel = document.querySelector('.c.selected'); if (curr_sel) curr_sel.classList.remove('selected'); element.classList.add('selected'); } </script> 

Answer 3

document.getElementsByClassName('c') -这将选择所有具有类c元素。

要删除具有类只有第一个元素c通过索引0选择集合的元素

document.getElementsByClassName('c')[0]

您应该遍历集合并逐一删除类。

function choosediv(element){
    if (document.querySelectorAll('.selected').length > 0) {
        document.querySelectorAll('.selected').forEach(el => {
          el.classList.remove('selected');
        })
    }

    element.classList.add('selected');
}

Answer 4

这是一个简单的方法。 只需遍历c的集合即可。 当element等于您当前正在迭代的element ，添加类，否则将其删除：

 const cs = document.querySelectorAll('.c'); function choosediv(element) { for (const c of cs) { c.classList[c === element ? 'add' : 'remove']('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>