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

jquery --Chnage the background color in cyclic order

本文关键字：背景 颜色 顺序 循环 jquery      更新时间：2023-09-26

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

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

请参阅这个jsfiddle

参见演示

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

您可以使用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/

相关文章：