Question

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

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

我想要达到的目的是：

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

非常感谢任何想法。

Answer 1

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

＆＃13;

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

＆＃13;

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

＆＃13;

<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>

＆＃13;

Answer 2

看一下下面的代码片段。请注意，在游泳池中，所有颜色都应该是唯一的，否则您必须创建一个额外的变量来跟踪应用颜色的索引。

var pool = ['yellow', 'green', 'red', 'blue']
var body = document.getElementsByTagName('body')[0];
body.style.backgroundColor = 'yellow';
function changeColor() {
  var bodyColor = body.style.backgroundColor;
  var appliedIndex = pool.indexOf(bodyColor);
  if (appliedIndex === pool.length - 1) {
    body.style.backgroundColor = pool[0];
  } else {
    body.style.backgroundColor = pool[appliedIndex + 1];
  }
}

<button id="change" onClick="changeColor()">Change</button>

在Javascript

2 个答案: