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

Is there a better way to cycle through a series of classes on click than this javascript

本文关键字：javascript 方法 更好 循环 有没有 一系列      更新时间：2023-09-26

我为自己设置了一个小项目，使用纯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呢?

希望这是你想要的。使用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>

相关文章：