在Javascript中的类池之间切换

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

但我还没有找到一个解决方案，可以使用onclick事件在类池之间切换

我想要实现的是：

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

---

非常感谢您的任何想法。

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

var池=['yellow'、'green'、'red'、'blue']
var body=document.getElementsByTagName（'body'）[0]；
body.style.backgroundColor='黄色'；
函数changeColor（）{
var bodyColor=body.style.backgroundColor；
var appliedIndex=pool.indexOf（bodyColor）；
if（appliedIndex==pool.length-1）{
body.style.backgroundColor=池[0]；
}否则{
body.style.backgroundColor=池[appliedIndex+1]；
}
}

---

Change

这里有一个简单的答案，您可以修改它，以便将更多类推送或弹出到数组中，等等

var类=[“黄色”、“绿色”、“红色”]；
var按钮=$（“#更改颜色”）；
var计数=1；
按钮。打开（“单击”，函数（）{
$（“#foo”）.removeClass（）；
$（“#foo”）.addClass（classes[count]）；
计数++；
如果（计数>2）{
计数=0；
}
});
.yellow{
背景颜色：黄色；
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}

福
更改
您能提供并举例说明吗？我发现这个答案是最正确的，因为它实际上改变了类，而不仅仅是向body元素添加内联css。谢谢我已经更新了小提琴，以满足我的需要，但问题是，切换类会删除所有以前的类，而不仅仅是颜色类。你知道如何保留所有其他类，只替换彩色类吗？请看这里：@JaschaGoltermann只需使用类似count-1的内容删除前面的类，如果count为0，则使用一个特例。如果到时候你还不解决的话，我回家后会发一把小提琴。谢谢你，弗兰乔！我用另一个解决方案更新了fiddle，该解决方案仅在类与其中一个颜色名称匹配时才删除该类，但我相信您有一种更优雅的方式。不管怎样，我想到的是：