JavaScript: querySelectorAll и классList toggle не работают как ожидалось

Question

У меня есть несколько кнопок, которые я хочу переключить на класс active, когда выбрана другая кнопка, а также переключить кнопку, когда кнопка с классом active снова выбрана (т.е. удаление класса).

Также, this правильно возвращает выбранный элемент, когда я 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'); 
}