Question

我正在处理一个小问题。我有<li>个元素，我想改变它们每次点击的背景颜色。在我的代码中，我试图计算点击次数。如果click = 1，则背景颜色为红色。如果click = 2，则背景颜色为蓝色。如果click = 3，背景颜色将恢复为原始颜色，计数将返回0;

Here is my jsfiddle

Answer 1

这是你需要的吗？

$(function() {    
    $("#sortable li").each(function() {
        var count = 0;
        $(this).click(function(){
        count++;
        if (count === 1) {
            $(this).addClass('on');
        }
        else if(count === 2){
            $(this).removeClass('on');
            $(this).addClass('absent');
        }
        else{
            $(this).removeClass('absent');
            count = 0;
        }
        });
    });
});

请参阅：http://jsfiddle.net/j8s3D/12/

Answer 2

你增加count太多！
请注意，您可以缓存$(this)对象，而不是在每一行构造新的jQuery对象！

固定代码：

$(function() {
    $("#sortable li").click(function() {
        var $this = $(this);
        var count = $this.data('count') || 1;

        if (count === 1) {
            $this.addClass('on');
        }
        else if (count === 2) {
            $this.removeClass('on').addClass('absent');
        }
        else {
            $this.removeClass('absent');
            count = 1;            
        }
        $this.data('count', count+1);
    });
});

Fiddle

Answer 3

你可以使用.data（）跟踪特定的'状态'（或者你只是它有一个特定的css类而不使用计数器，但如果你想保留计数器：{{3 }}

Answer 4

var arry = ['red', 'blue','orange'], i=0, len= arry.length;
$('#element').on('click',function(){  
  $(this).css('background',arry[i++]);
    if(i===len){i=0;}
});

http://jsfiddle.net/NarBh/1/

Answer 5

您可以使用.data()将数字与元素相关联。您还应该缓存$(this)并使用开关而不是if / else结构。最后，您可以链接removeClass和adddClass方法。 http://jsfiddle.net/pXFs6/

$(function() {
    $("#sortable li").click(function() {
        $ele = $(this);
        count = $ele.data().count || 1;

        switch(count) {
            case 1:
                $ele.addClass('on');
                break;
            case 2:
                $ele.removeClass('on')
                    .addClass('absent');
                break;
            default:
                $ele.removeClass('absent');
                count = 0;
                break;
        }
        $ele.data('count', count+1);

    });
});

Answer 6

我想为您提供另一种变体（稍微优化一下）：

$(function() {    
    $("#sortable li").each(function() {
        var count = 0;
        $(this).click(function(){
            var $this = $(this);
            count++;
        if (count === 1) {
            $this.addClass('on');
        }
        else if(count === 2){
            $this.addClass('absent');
        }
        else{
            $this.removeAttr('class');
            count = 0;
        }
        });
    }); });

FIDDLE

在jquery中单击更改多个类

6 个答案: