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/