JavaScript：querySelectorAll＆classListが期待どおりに動作しない

Question

activeを別のボタンが選択されているときにオンにし、activeクラスのボタンを再度選択したときにボタンを切り替えるボタンがいくつかあります。クラスを削除する）。

また、thisは、I console.logの場合、選択した要素を正しく返しています。

行this.classList.toggle('active');はクラスを追加していますが、削除していません。どんな考え？

var controls = document.querySelectorAll('.controls > button'); 

    for (var i = 0; i < controls.length; i++) { 
     controls[i].addEventListener('click', btnClick, false); 
    } 

    function btnClick() { 
     [].forEach.call(controls, function(el) { 
      // Remmove active class from all buttons 
      el.classList.remove('active'); 
     }); 

     this.classList.toggle('active'); 
    } 

Answer 1

EDIT

はあなたのコメントによると、あなたはボタンをオフに切り替えることができるようにしたいです。私はこの動作を使用する答えを更新しました。

var controls = document.querySelectorAll('.controls > button'); 
 

 
// you can use forEach here too 
 
[].forEach.call(controls, el => { 
 
    el.addEventListener('click', btnClick, false) 
 
}) 
 

 
function btnClick() { 
 
    // use Array function for lexical this 
 
    [].forEach.call(controls, el => { 
 
    // except for the element clicked, remove active class 
 
    if (el !== this) el.classList.remove('active'); 
 
    }); 
 

 
    // toggle active on the clicked button 
 
    this.classList.toggle('active'); 
 
}

button { 
 
    border-width: 1px; 
 
    border-radius: 1rem; 
 
    outline: 0; 
 
} 
 

 
button.active { 
 
    background: dodgerblue; 
 
    color: white; 
 
}

<div class="controls"> 
 
    <button class="active">A</button> 
 
    <button>B</button> 
 
    <button>C</button> 
 
    <button>D</button> 
 
</div>

Answer 2

最初すべて要素からクラスを削除します。その後、あなたはそれらのいずれかでそれを切り替えます。あなたはそれらをすべてから削除したので、常にそれが戻されます。

クラスを削除するリストから選択したものを除外します。

function btnClick() { 

    var target = this; 

    [].forEach.call(controls, function(el) { 
     if (target !== el) { 
      el.classList.remove('active'); 
     } 
    }); 

    target.classList.toggle('active'); 
}