javascript - 有没有比这个 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');
    }
}

从各种谷歌搜索中成功拼凑出上述代码后，我想知道是否有更有效的方法来执行此操作，因为它看起来有点啰嗦？

A jsFiddle can be found here对于那些有兴趣的人。

另外，作为我的问题的第二部分，我最初尝试使用 .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>