Javascript jquery——按循环顺序更改背景颜色

我有一个背景色为红色的div。单击此div时，背景颜色应按循环顺序更改。。红色、绿色和灰色。。这种循环应该继续下去

我不想使用任何jquery插件来实现这一点

请参阅此

参见

​
div{
背景#3f3；
高度：40px；
宽度：40px；
}
var-cur=0；
变量颜色=['#3f3'、'#f33'、'#33f'、'#ff3']；
$（'.myDiv'）。单击（函数（）{
cur=（cur+1）%colors.length；
$（this.css（'background'，colors[cur]）；
});   ​

您可以使用

数据

存储当前状态：

var classes = ['red', 'blue', 'green', 'yellow']

$('#box').click(function () {
    var box = $(this);
    var index = box.data('current-index') || 0;
    index++;
    if (index >= classes.length)
        index = 0;
    box.data('current-index', index);

    box.removeClass(classes.join(' '));
    box.addClass(classes[index]);
});

---

工作示例

好的，开始编写代码，我们会帮助您，即使您不想使用jQuery插件，我认为@Raynos的这个（）是一个很好的方法。

var classes = ['red', 'blue', 'green', 'yellow']

$('#box').click(function () {
    var box = $(this);
    var index = box.data('current-index') || 0;
    index++;
    if (index >= classes.length)
        index = 0;
    box.data('current-index', index);

    box.removeClass(classes.join(' '));
    box.addClass(classes[index]);
});