2

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

.red{ background-color: red; }

我想做的是修改 jQuery，以便一次 . red类被添加，下次它会添加.blue, .red，.blue依此类推...

我的脚本和你可以在这个演示中是这样的：

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

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

对不起，我没有分享更多，但我可怕的尝试只会让人困惑。

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

提前致谢！！

更新：

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

基本上需要三个 div，第一次单击，将单击的 div 变为红色，第二次将单击的 div 变为蓝色，然后红色等，它们应该切换（在第一次单击时单击变为红色或蓝色是唯一重要的）

4

1 回答 1

7

编辑：根据下面的评论，听起来您希望颜色为单击的每个后续项目交替显示，并且不能被尊重。

这应该这样做：

示例：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然后在每次单击时切换。redblue

如果您想在项目上没有任何课程的情况下开始，那么您可以这样做：

$a.click(function(){
    if( !this.className ) {
        this.className = 'red';
    } else {
        $(this).toggleClass('red blue');
    }
});
于 2010-12-17T21:19:56.567 回答