javascript - jquery --以循环顺序更改背景颜色

Question

我有一个背景颜色为 red 的 div 。单击此 div 背景颜色应按循环顺序更改 .. 红色、绿色和灰色 .. 循环应继续。

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

请参考这个jsfiddle

Answer 1

见演示

<div class="myDiv"></div>​

div {
  background: #3f3;
  height: 40px;
  width: 40px;    
}

var cur = 0;
var colors = ['#3f3', '#f33', '#33f', '#ff3'];

$('.myDiv').click(function() {
    cur = (cur + 1) % colors.length;
    $(this).css('background', colors[cur]);
});   ​

Answer 2

您可以使用data存储当前状态：

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

工作示例http://jsfiddle.net/jD6XK/