javascript - 在 Javascript 类池之间切换

Question

如何使用 vanilla JavaScript 或 jQuery 在两个类之间切换是一个问题，在 stackoverflow 和其他网站上已被多次询问和回答。

不过，我还没有找到使用 onclick 事件在类池之间切换的解决方案。

我想要实现的是:

我有一个类为“黄色”的主体元素。 单击按钮时，我希望将此类从正文中删除并替换为“绿色”类。再次单击该按钮应将类别更改为“红色”，下一次更改为“蓝色”，最后返回“黄色”，依此类推。

非常感谢任何想法。

Answer 1

这是一个简单的答案，您可以对其进行修改，以便将更多类插入或弹出到数组中等等。

var classes = ["yellow", "green", "red"];

var button = $("#changeColor");
var count = 1;
button.on("click", function(){
  $("#foo").removeClass();
  $("#foo").addClass(classes[count]);
  count++;
  if(count > 2){
  	count = 0;
  }
});

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="foo" style="width: 200px; height: 50px;" class="yellow">
  FOO
</div>

<button id="changeColor">CHANGE</button>