有没有比这个 javascript 更好的方法来循环点击一系列类

Question

我已经为自己设置了一个小项目来使用纯 javascript 而不是简单地诉诸 jquery。 在这个尝试中，我的目标是点击一个元素，当我点击一个元素时，它会改变颜色或其他什么，当我再次点击另一个元素时，它会变成另一种颜色，依此类推，直到我的选择结束，然后我们重新开始。 为此，我正在添加和删除类。

// hasClass
function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
// addClass
function addClass(elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}
// removeClass
function removeClass(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, '');
     }
}

document.getElementById('plug1').onclick = function() {
    if (hasClass(document.getElementById('plug1'), 'old')) {
        addClass(this, 'red');
        removeClass(this, 'old');
    }
    else if (hasClass(document.getElementById('plug1'), 'red')) {
        addClass(this, 'green');
        removeClass(this, 'red');
    }
    else if (hasClass(document.getElementById('plug1'), 'green')) {
        addClass(this, 'blue');
        removeClass(this, 'green');
    }
    else if (hasClass(document.getElementById('plug1'), 'blue')) {
        addClass(this, 'red');
        removeClass(this, 'blue');
    }
}

从各种谷歌搜索中成功拼凑出上面的代码后，我想知道是否有更有效的方法来做到这一点，因为它似乎有点冗长？

有兴趣的人可以在此处找到 jsFiddle 。

同样作为我问题的第二部分，我最初尝试使用 .getElementsByClassName ，因为目的是在几个元素上具有相同的功能，但是当我用 getElementsByClassName 替换 getElementById 时它失败了。 那么我如何将相同的内容应用于类而不是 Id？

Answer 1

希望这是你想要的。 使用classList更容易;)

 // Fetch all elements with .plug1 class. var elems = document.getElementsByClassName('plug1'); // Add Onclick listener to all of them for(var i = 0; i<elems.length; i++) elems[i].onclick = myFunc; // Replace Color mapping var replaceClasses = { old: 'red', red: 'green', green: 'blue', blue: 'red' }; function myFunc(event){ // Element clicked var elem = event.target; // Their classes var classes = elem.classList; // Find which class he has. var key = Object.keys(replaceClasses).find(function(i){ return classes.contains(i); }); // Remove this class classes.remove(key); // Add the new class classes.add(replaceClasses[key]); }

 .plug1 { width: 10px; height: 10px; border: 1px solid; } .old { background-color: grey; } .red { background-color: red; } .blue {background-color: blue; } .green { background-color: green; }

 <div class="plug1 old"></div> <div class="plug1 old"></div> <div class="plug1 old"></div> <div class="plug1 old"></div>