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

jquery切换 - 防止顺序切换

2 个答案: