Question

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

setup.py install

从各种谷歌搜索中成功拼凑上面的代码之后，我想知道是否有一种更有效的方式来实现这一点，因为它似乎有点长篇大论？

A jsFiddle can be found here感兴趣的人。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

是否有更好的方法来循环浏览一系列关于点击的类而不是这个javascript

1 个答案: