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"); 
      } 
     }); 
});