jquery - 添加 jQuery 的类之间交替

Question

我有 3 个 div，当单击一个 div 时，jQuery 脚本会添加一个类:

.red{ background-color: red; }

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

我的脚本你可以 the in this demo是这样的:

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

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

很抱歉我没有分享更多，但我可怕的尝试只会让人困惑。

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

提前致谢!!

更新:

我认为这个问题还不够清楚，所以我会尝试进一步解释。

基本上需要三个div，第一次点击，将点击的div变成红色，第二次点击将点击的div变成蓝色，然后红色变成so打开，它们应该切换(点击时变为红色或蓝色，第一次点击是唯一重要的)

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。

如果您想在没有任何类(class)的情况下开始该项目，那么您可以这样做:

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