每个元素上的 JavaScript 单击函数

Question

我正在使用 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>

CSS

.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;}

JS

// 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');
}

和 fiddle :http://jsfiddle.net/S3K3c/

Answer 1

您是 jQuery 用户吗？ $(".button").click(function(){...}); 的功能远比您想象的要多。

试试这个:

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