將類添加到JavaScript中的nodeList上點擊的按鈕

Question

我有button元素的列表，我想在每個單擊時添加一個類，並從所有其他按鈕中刪除類。我如何在純Javascript中做到這一點？

<button>btn1</button> 
<button>btn2</button> 
<button>btn3</button> 
<button>btn4</button> 
<button>btn5</button> 

var el = document.querySelectorAll("button"); 

el.addEventListener("click", function() { 
    el.classList.remove("toggle"); 
    this.classList.add("toggle"); 
}); 

Answer 1

通過按鈕列表兩次去。第一次添加事件監聽器到每個按鈕。第二次點擊時按鈕。

var btns = document.querySelectorAll("button"); 
 
var cN = "toggle"; 
 

 
function change(el, cN) { 
 
    [].forEach.call(btns, function(btn) { 
 
    if (btn.className === cN) { 
 
     btn.classList.remove(cN); 
 
    } 
 
    }); 
 
    el.classList.add(cN); 
 
} 
 

 
[].forEach.call(btns, function(btn) { 
 
    btn.addEventListener("click", function() { 
 
    change(this, cN); 
 
    }); 
 
});

button { 
 
    outline: none; 
 
} 
 
.toggle { 
 
    color: orange; 
 
}

<div> 
 
    <button>btn1</button> 
 
    <button>btn2</button> 
 
    <button>btn3</button> 
 
    <button>btn4</button> 
 
    <button>btn5</button> 
 
</div>