如何只允許一個特定類的元素

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>