在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上單擊更改多個類

回答

相關問題