jquery切換 - 防止順序切換

Question

我有一個類agg-drop的列表，其項目有一個類名sortedli。這些項目有2個切換狀態。我使用.clone（true）克隆這些項目，該項目將該項目添加到類名爲「all-drop」的列表中。此列表中的項目有3個切換狀態。現在，如果我要切換新克隆列表中的項目，則前兩次單擊不會執行任何操作，大概是因爲它正在按順序切換函數，並且切換依賴於類名稱。無論如何要防止這一點？

$(".sortedli").toggle(function(){ 
    if($(this).parent().hasClass('agg-drop')){ 
      $(this).css("background","orange"); 
    }}, 
    function(){ 
    if($(this).parent().hasClass('agg-drop')){ 
      $(this).css("background","yellow"); 
    }}, 
    function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","red"); 
    }}, 
    function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","green"); 
    }}, 
     function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","blue"); 
    }} 
); 

Answer 1

這工作？

$(".sortedli").toggle(function(){ 
    if($(this).parent().hasClass('agg-drop')){ 
      $(this).css("background","orange"); 
    }}, 
    function(){ 
    if($(this).parent().hasClass('agg-drop')){ 
      $(this).css("background","yellow"); 
    } 
}).toggle(function(){ 
    function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","red"); 
    }}, 
    function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","green"); 
    }}, 
     function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","blue"); 
    } 
}); 

Answer 2

你假設它是按順序經過切換列表是正確的。這也是爲什麼原始li更改兩次，然後什麼都不做3次。你想要做的是你克隆ul

後附加一個單獨的觸發事件這是我想，你的代碼看起來像現在：（http://jsfiddle.net/QGxRK/2/）

$(function() { 
    $(".sortedli").toggle(function(){ 
     if($(this).parent().hasClass('agg-drop')){ 
       $(this).css("background","orange"); 
     }}, 
     function(){ 
     if($(this).parent().hasClass('agg-drop')){ 
       $(this).css("background","yellow"); 
     }}, 
     function(){ 
     if($(this).parent().hasClass('all-drop')){ 
        $(this).css("background","red"); 
     }}, 
     function(){ 
      if($(this).parent().hasClass('all-drop')){ 
       $(this).css("background","green"); 
     }}, 
      function(){ 
     if($(this).parent().hasClass('all-drop')){ 
       $(this).css("background","blue"); 
     }} 
    ); 

    var allDrop = $('.agg-drop').clone(true); 
    allDrop.removeClass('agg-drop').addClass('all-drop'); 
    allDrop.insertAfter('.agg-drop'); 
}); 

這是更多你想要什麼：http://jsfiddle.net/QGxRK/3/

$(function() { 
    $(".sortedli").toggle(function(){ 
     if($(this).parent().hasClass('agg-drop')){ 
       $(this).css("background","orange"); 
     }}, 
     function(){ 
     if($(this).parent().hasClass('agg-drop')){ 
       $(this).css("background","yellow"); 
     }} 
    ); 

    var allDrop = $('.agg-drop').clone(); //Don't need to clone the events 
    allDrop.removeClass('agg-drop').addClass('all-drop'); 
    allDrop.insertAfter('.agg-drop'); 

    allDrop.find('.sortedli').toggle(function(){ 
      if($(this).parent().hasClass('all-drop')){ 
        $(this).css("background","red"); 
      } 
     }, 
     function(){ 
     if($(this).parent().hasClass('all-drop')){ 
        $(this).css("background","green"); 
      } 
     }, 
     function(){ 
      if($(this).parent().hasClass('all-drop')){ 
        $(this).css("background","blue"); 
      } 
     }); 
});