Hinzufügen von Klasse zu der angeklickte Schaltfläche auf nodeList in Javascript

Question

Ich habe eine Liste von button Elemente und ich möchte hinzufügen, eine Klasse zu jedem beim Klicken auf und entfernen Sie die Klasse von allen anderen Schaltflächen. Wie kann ich das in reinem Javascript machen?

<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

die Schaltfläche Liste zweimal gehen. Das erste Mal Ereignis Listener zu jede Schaltfläche hinzufügen. Und das zweite Mal, wenn eine Taste ist geklickt.

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>