jquery - 按循环顺序背景颜色

Question

我有一个背景色为红色的div。在点击这个div的背景颜色应该改变循环顺序..红色，绿色和灰色..周期应该继续。

我不希望使用任何的jQuery插件来实现这一目标

请参阅本jsfiddle

Answer 1

见DEMO

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

工作实例e http://jsfiddle.net/jD6XK/