0

我有一个带有 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");
    }}
);
4

2 回答 2

0

这行得通吗？

$(".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");
    }
});
于 2012-07-04T15:47:25.753 回答
0

你的假设是正确的，它是按顺序通过切换列表的。这也是为什么原来的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");
            }
        });
});
于 2012-07-04T15:48:47.637 回答