0

クラス agg-drop のリストがあり、そのアイテムのクラス名は sortedli です。これらのアイテムには 2 つのトグル状態があります。.clone(true) を使用してこれらのアイテムを複製します。これにより、クラス名が「all-drop」のリストにアイテムが追加されます。このリストの項目には 3 つのトグル状態があります。ここで、新しく複製されたリストの項目を切り替える場合、最初の 2 回のクリックでは何も起こりません。これはおそらく、切り替え機能が順番に実行され、切り替えがクラス名に依存しているためです。これを防ぐ方法はありますか？

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

トグルリストを順番に通過しているというあなたの仮定は正しいです。これが、オリジナルliが 2 回変更されてから 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 に答える
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 に答える