Jquery 的 $('#element').on/off 在第二次后不起作用

Question

我有以下 jQuery 代码（我的第一个自制 jQuery 代码，所以不要对我太苛刻:)）。 我第一次使用切换开关时，一切都完美无缺：

• 我单击右切换，#content 移动并出现左切换。
• 我单击左侧切换，#content 向后移动并出现右侧切换。 （一切都回到起始位置）。

但在那之后，我的右切换不再是可点击的（虽然它确实出现了）。我想一遍又一遍地做同样的事情（点击右键，#content move等）。但是用我当前的代码，我只能做一次这个动画。

谁能帮帮我:)？

提前谢谢:)

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

    });

Answer 1

你有很多不必要的代码。你不需要开和关。 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();
                    });

        });

Answer 2

因为 jQuery 的 on 和 off 不是先前设置的处理程序的切换！

当您调用on() 时，您将一个处理程序（一个函数）添加到一个事件中。但是当您调用off() 时，您会删除所有附加到事件的处理程序。

当您调用on('click') 时，您不会重新激活您之前设置的处理程序：

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

但是，您添加另一个函数以在单击时调用它。