Jquery 为什么不是'；我的新课没人接吗？

我正在尝试更改按钮的类，以便在单击按钮时隐藏一个div，文本更改为显示，并且使用addClass/removeClass更改该类，以便下一次单击事件可以拾取该类，该事件将反转该过程

然而，它不太有效，我不知道为什么：/

这是我的密码

HTML:

JQ:

当我点击按钮时，div成功隐藏，类被更改（由CSS和Chromes开发工具确认）。但当我再次点击它时，什么也没发生

---

任何帮助都将不胜感激

在定义处理程序时，

.hide1

按钮还不存在，因此它不绑定事件。有两种解决方法：

1：使用实际切换：

(function() {
    var toggle = true;
    $(document).ready(function() {
        $(".first").click(function() {
            toggle = !toggle;
            if( toggle) {
                $(".vanish1").fadeIn("slow");
                $(this).text("Hide the box!").removeClass("hide1").addClass("first");
            }
            else {
                $(".vanish1").fadeOut("slow");
                $(this).text("Show the box!").addClass("hide1").removeClass("first");
            }
        });
    });
})();

或2：在上使用

：

$(document).ready(function() {
    $('.first').on('click',function() {
            $('.vanish1').fadeOut('slow');
            $(this).text('Show the box!').addClass("hide1").removeClass("first");
    });

    $('.hide1').on('click',function() {
        $('.vanish1').fadeIn('slow');
        $(this).text('Hide the box!').removeClass("hide1").addClass("first");
    });
});

首选方法1。
在定义处理程序时，
.hide1
按钮还不存在，因此它不会绑定事件。有两种解决方法：

1：使用实际切换：

(function() {
    var toggle = true;
    $(document).ready(function() {
        $(".first").click(function() {
            toggle = !toggle;
            if( toggle) {
                $(".vanish1").fadeIn("slow");
                $(this).text("Hide the box!").removeClass("hide1").addClass("first");
            }
            else {
                $(".vanish1").fadeOut("slow");
                $(this).text("Show the box!").addClass("hide1").removeClass("first");
            }
        });
    });
})();

或2：在

上使用

：

$(document).ready(function() {
    $('.first').on('click',function() {
            $('.vanish1').fadeOut('slow');
            $(this).text('Show the box!').addClass("hide1").removeClass("first");
    });

    $('.hide1').on('click',function() {
        $('.vanish1').fadeIn('slow');
        $(this).text('Hide the box!').removeClass("hide1").addClass("first");
    });
});

首选方法1。
您正在动态添加/删除类

表示您正在添加类
hide1
时单击了
。因此在此之前单击
。未注册hide1


尝试在动态添加/删除类时使用jquery上的绑定将事件绑定到主体

表示您正在添加类
hide1
时单击了
。因此在此之前单击
。未注册hide1


尝试使用jquery的on将事件绑定到主体上，动态更改html时可以使用。看这个

动态更改html时，可以使用。看这个

Look In event delegationLook In event delegationMethod 2也不会绑定任何内容。您是否将
on
与
live
混淆？可能是这样。这里是非jQuery用户，只是使用了我在这里学到的东西。在
上使用
进行委托的正确语法是
$（document）。在（'click'，'.hide1'，function（）{…}）
。将
文档
替换为您可以绑定到的最接近的父级。方法2也不会绑定任何内容。您是否将
on
与
live
混淆？可能是这样。这里是非jQuery用户，只是使用了我在这里学到的东西。在
上使用
进行委托的正确语法是
$（document）。在（'click'，'.hide1'，function（）{…}）
。将
文档
替换为您可以绑定到的最接近的父级。请注意，
$（'body'）
是次优的。我更喜欢
$（document.body）
。请注意，如果没有更好的家长，通常一个人会委托给
$（document）
。是对包含“.first”的对象的初始调用吗？然后是on方法等等。有什么视频可以让我看得更清楚吗？格式是$（“parent”）.on（'event'，'selector'，function（）{}）；12点30分左右开始观看。它解释了代码的性能增强。也可以在
.on（）
方法的jquery文档中找到这一点注意
$（'body'）
是次优的。我更喜欢
$（document.body）
。请注意，如果没有更好的家长，通常一个人会委托给
$（document）
。是对包含“.first”的对象的初始调用吗？然后是on方法等等。有什么视频可以让我看得更清楚吗？格式是$（“parent”）.on（'event'，'selector'，function（）{}）；12点30分左右开始观看。它解释了代码的性能增强。在
.on（）
方法的jquery文档中也可以找到这个
$(document).ready(function() {
    $('.first').on('click',function() {
            $('.vanish1').fadeOut('slow');
            $(this).text('Show the box!').addClass("hide1").removeClass("first");
    });

    $('.hide1').on('click',function() {
        $('.vanish1').fadeIn('slow');
        $(this).text('Hide the box!').removeClass("hide1").addClass("first");
    });
});

$('body').on('click', '.first', function() {
        $('.vanish1').fadeOut('slow');
        $(this).text('Show the box!');
        $(this).addClass("hide1");
        $(this).removeClass("first");
});
$('body').on('click', '.hide1', function() {
    $('.vanish1').fadeIn('slow');
    $(this).text('Hide the box!');
    $(this).removeClass("hide1");
    $(this).addClass("first");
});