在jquery上单击更改多个类

我正在处理一个小问题。我有<li>元素，我想在每次点击时更改他们的背景颜色。在我的代码中，我试图计算点击次数。如果点击= 1，则背景颜色将变为红色。如果点击= 2，那么背景颜色将是蓝色。如果点击= 3，背景颜色将恢复为原始值，并且计数将回到0;在jquery上单击更改多个类

Here is my jsfiddle

来源

2012-03-11 user1056998

这是你需要什么？

$(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/

来源

2012-03-11 14:26:37 Giberno

是。非常感谢你。请给我一个解释，说明你是如何做到的？由于我真的是新手，我似乎很难理解jQuery代码。 – user1056998 2012-03-11 14:28:44

他循环li的集合，创建一个名为count的局部变量，首先添加一个单击事件，它首先影响局部变量 – voigtan 2012-03-11 14:30:22

，因为每个按钮都有其独立的计数，所以我认为应该先使用jquery.each。见http://api.jquery.com/jQuery.each/，那么你已经使用了一个'count ++;'，所以不需要使用太多的'++'。 – Giberno 2012-03-11 14:33:34

你增加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

来源

2012-03-11 14:28:38 gdoron

哦！所以解释它。谢谢！ – user1056998 2012-03-11 14:31:28

@ user1056998。注意我如何链接jQuery代码：'$ this.removeClass（'on'）。addClass（'absent'）;' – gdoron 2012-03-11 14:33:56

@ user1056998。请参阅更新。 – gdoron 2012-03-11 14:40:11

可以使用。数据（），以保持对特定LIS '国家' 的轨道（或者你只是如果它有一个特定的CssClass和不使用计数器，但如果你想保持计数器：http://jsfiddle.net/j8s3D/13/

来源

2012-03-11 14:28:45 voigtan

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/

来源

2012-03-11 14:32:56

您可以使用.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); 

    }); 
});

来源

2012-03-11 14:41:18 TimPetricola

我想向你提供另一种变体（一点点优化）：

$(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

来源

2012-03-11 20:52:01

在jquery上单击更改多个类

回答

相关问题