j查询切换 - 防止顺序切换

jquery toggle - prevent sequential toggling

本文关键字：顺序 查询      更新时间：2023-09-26

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

这行得通吗？

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

您的假设是正确的，即它按顺序通过切换列表。 这也是为什么原始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");
            }
        });
});
相关文章：