classList.add有效，但切換無效

Question

我的HTML

<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<button id="button">button</button>

我的js

var button = document.querySelector('#button');
var chapter = document.querySelectorAll('.chapter');
for(var i = 0; i < chapter.length; i++){
button.addEventListener('click', function(){

for(var i = 0; i < chapter.length; i++) {
chapter[i].classList.add('active');
}
});
}

單擊按鈕將添加“活動”類。

但是切換不起作用。 代替

chapter[i].classList.add('active');

當我做，

chapter[i].classList.toggle('active');

“活動”類別不會切換。 控制台未顯示任何錯誤。

因此，我嘗試首先檢查“活動”的類並刪除該類（如果該類存在）。 我知道我正在嘗試重新發明切換功能。 如上所述，切換功能無效，因此我還是嘗試了一下。

if (chapter[i].contains('active')){
chapter[i].classList.remove('active');  

而且我收到了很多錯誤消息。 據我所知。 我不知何故感覺這是行不通的，但還是嘗試了一下。

我感到難過。

誰能指出為什么classList.toggle在我的代碼中不起作用以及如何解決？

謝謝。

Answer 1

您有一個太多的循環。 卸下外面的一個：

 var button = document.querySelector('#button'); var chapter = document.querySelectorAll('.chapter'); button.addEventListener('click', function(){ for(var i = 0; i < chapter.length; i++) { chapter[i].classList.toggle('active'); } }); 

 .active{ color: red; } 

 <div class="chapter">text text text </div> <div class="chapter">text text text </div> <div class="chapter">text text text </div> <div class="chapter">text text text </div> <button id="button">button</button> 

Answer 2

 var button = document.querySelector('#button'); var chapters = document.querySelectorAll('.chapter'); button.addEventListener('click', function(){ for(var index = 0; index < chapters.length; index++) { if(chapters[index].classList.contains('active')){ chapters[index].classList.remove('active'); }else{ chapters[index].classList.add('active'); } } }); 

 .active { color: red; } 

 <div class="chapter">text text text </div> <div class="chapter">text text text </div> <button id="button">Toggle Color</button>