在类之间交替添加了jQuery

Question

我有一个3 div,jQuery脚本在单击div时添加一个类:

.red{ background-color: red; }

我想做的是修改jQuery以便一次性.red类添加的下一次就会增加.blue,.red,.blue等...

我的脚本你可以在这个演示中这样:

var $a = $('.box');
$a.click(function(){

        $(this).addClass('red');
});

对不起,我不会分享更多,但我的可怕尝试只会让人感到困惑.

我希望我已经说清楚,如果没有请问!

提前致谢!!

更新:

我认为问题不够明确,所以我会尝试进一步解释.

什么需要基本上是三个div,第一次点击,将点击的div变为红色,第二次将点击变成蓝色,红色等等,他们应该切换(当点击第一次点击时变为红色或蓝色是唯一一个重要的)

Answer 1

编辑:根据下面的评论,听起来你想要为每个被点击的后续项目交替颜色,并且它不能被尊重.

这应该这样做:

示例: http ://jsfiddle.net/patrick_dw/zUdWq/

$('a').click((function() {
    var i = 0;
    var colors = ['blue','red'];
    return function() {
        $(this).addClass( colors[i = ++i % 2] ).unbind('click');
    };
})());

这使用闭包来包装变量.如果你不想要/不需要那个,那么没有闭包这就是同样的事情.

示例: http ://jsfiddle.net/patrick_dw/zUdWq/1/

var i = 0;
var colors = ['blue','red'];

$('a').click(function() {
    $(this).addClass( colors[i = ++i % 2] ).unbind('click');
});

原始答案:

$a.addClass('red').click(function(){
    $(this).toggleClass('red blue');
});

这将通过增加启动red时加载页面,则此后将切换类red和blue在每一次点击.

如果你想在没有任何课程的情况下开始,那么你可以这样做:

$a.click(function(){
    if( !this.className ) {
        this.className = 'red';
    } else {
        $(this).toggleClass('red blue');
    }
});