Jquery的$（'＃element'）。on/off在第二次後不起作用

我有以下jQuery代碼（我的第一個自制jQuery代碼，所以不要太在意:)）。 Eveything完全適用於我第一次使用切換：

我點擊右側的撥動，顯得＃內容移動，離開切換。
我點擊左側切換，＃內容向後移動，右側切換出現。（一切都回到起始位置）。

但之後，我的右鍵不再可點擊（它確實出現）。我想一遍又一遍地做同樣的事情（點擊右鍵切換，＃內容移動等等）。但用我目前的代碼，我只能做一次這個動畫。

任何人都可以幫助我:)？

感謝提前:)

//starting values 
    $(".rowToggleL").off('click');  
    $(".rowToggleR").on('click'); 

    //Right Toggle 
    $(".rowToggleR").click(function() { 

     // make Toggle Right unclickable, make Toggle Left clickable 
     $(".rowToggleR").off('click'); 
     $(".rowToggleL").on('click'); 


     //animate contentbox 
     $("#content").animate({ 
      left: "-=300" // animate to the right 
     }, 800, 

     // Animation complete. Make Toggle Right invisible, make Toggle Left visible 
     function() { 
      $(".rowToggleR").css("display", "none"); 
      $(".rowToggleL").css("display", "inline"); 
     }); 


    }); 

    //Left Toggle 
    $(".rowToggleL").click(function() { 

     // make Toggle Left unclickable, make Toggle Right clickable 
     $(".rowToggleL").off('click');  
     $(".rowToggleR").on('click'); 

    //animate contentbox 
     $("#content").animate({ 
      left: "+=300" // animate to the right 
     }, 800, 

     // Animation complete. Make Toggle Left invisible, make Toggle Right visible. 
     function() { 
      $(".rowToggleL").css("display", "none"); 

      $(".rowToggleR").css("display", "inline"); 
     }); 

    });

來源

2014-04-19 Frank

你有很多不必要的代碼。你不需要打開和關閉。另外jQuery的隱藏和顯示功能。這應該工作：

//Right Toggle 
$(".rowToggleR").click(function() { 
    //animate contentbox 
    $("#content").animate({ 
     left: "-=300" // animate to the right 
    }, 800, 
      // Animation complete. Make Toggle Right invisible, make Toggle Left visible 
        function() { 
         $(".rowToggleR").hide(); 
         $(".rowToggleL").show(); 
        }); 


     }); 

//Left Toggle 
$(".rowToggleL").click(function() { 
    //animate contentbox 
    $("#content").animate({ 
     left: "+=300" // animate to the right 
    }, 800, 
      // Animation complete. Make Toggle Left invisible, make Toggle Right visible. 
        function() { 
         $(".rowToggleL").hide(); 
         $(".rowToggleR").show(); 
        }); 

     });

來源

2014-04-19 19:55:08 Boelensman1

工程！非常感謝！ :)！ – Frank

因爲jQuery的開啓和關閉不切換以前設置的處理程序！

當您致電on()時，您將一個處理函數（函數）添加到事件中。但是當您撥打off()時，您將刪除全部附加到事件的處理程序。

當你調用on('click')，你不激活您先前設定的處理程序：

$(".rowToggleR").click(function() {}); // Which equals $(".rowToggleR").on('click', function() {});

而是你添加其他功能單擊時調用。

來源

2014-04-19 19:55:40 Bigood

啊謝謝:)這說明了很多。 – Frank

我仍然有一個問題。我現在使用boelensman1的代碼，但是我仍然可以單擊切換兩次，這會導致左側位置動畫左+ = 600或 - = 600。 – Frank

@Frank您可以驗證您的內容的實際位置，並僅在預期位置移動它。你也可以設置一個標誌來反映你的內容的位置（比如'currentProg ='right'||'center'||'left''） – Bigood

Jquery的$（'＃element'）。on/off在第二次後不起作用

回答

相關問題