javascript - jquery -- 背景色を循環的に変更する

Question

背景色 red の div があります。このdivの背景色をクリックすると、赤、緑、灰色の順に周期的に変化し、周期が続くはずです。

これを実現するためにjqueryプラグインを使用したくありません

このjsfiddleを参照してください

Answer 1

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/

Answer 2

デモを見る

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