JavaScript对每个元素的单击功能

我正在使用JavaScript开发一个简单的点击/切换功能。我有多个按钮，它们运行相同的功能，在单击时更改其颜色。不过我想为每个按钮切换颜色

目前看来是这样的：

HTML

<button class="button red">button</button>
<button class="button yellow">button</button>
<button class="button green">button</button>
<button class="button blue">button</button>

JS

.button {
    background:black;
    text-decoration:none;
    border-radius:6px;
    color:white;

}
.red     {background:red}
.yellow  {background:yellow}
.blue    {background:blue;}
.green   {background:green;}
.magenta {background:magenta !important;}

// hasClass
function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
// toggleClass
function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") >= 0 ) {
            newClass = newClass.replace( " " + className + " " , " " );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}
document.querySelector('.button').onclick = function() {
    toggleClass(this, 'magenta');
}

---

还有小提琴：

你是jQuery用户吗<代码>$（“.button”）。单击（函数（）{…}）在引擎盖下做的比你想象的多得多

试试这个：

[].forEach.call(document.querySelectorAll(".button"),function(btn) {
    btn.onclick = function() {this.classList.toggle("magenta");}
});

---

[]在开头是什么意思？它是一个数组文本。我们需要在

querySelectorAll

集合上使用数组（

forEach

）中的函数。