为什么我的新课程没有被选中？答案

【问题标题】：Why isn't my new class being picked up?为什么我的新课程没有被选中？
【发布时间】：2023-03-13 05:05:01
【问题描述】：

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

但是，它不是很有效，我不知道为什么：/

这是我的代码。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Vanishing Act</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div class="vanish1"></div>
        <div class="vanish2"></div>
        <div class="vanish3"></div>
        <div class="vanish4"></div>
        <br/>
        <br />
        <button class='first' value='button'>Hide the box!</button>
    </body>
</html>

CSS：

.vanish1 {
    height: 100px;
    width: 100px;
    display: inline-block;
    background-color: #F38630;
    border-radius: 5px;
}

.hide1 {
    color: red;
}

JQ：

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

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

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

任何帮助将不胜感激！

【问题讨论】：

查看事件委托

标签： jquery css html

【解决方案1】：

您可以在动态更改 html 时使用delegate。请参阅此Fiddle。

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

【讨论】：

请注意，$('body') 是次优的。我更喜欢$(document.body)。请注意，通常一个委托给$(document)，而不是给一个更好的父母。
只是为了让我理解代码。您是对包含“.first”的对象的初始调用吗？然后是on方法等等。有没有我可以观看的视频以获得更好的想法？
格式为 $("parent").on('event', 'selector', function(){});从大约 12:30 开始观看此 youtube video。它解释了代码的性能增强。也可以去.on()方法的jquery文档中的这个article

【解决方案2】：

您正在动态添加/删除类
表示您在单击.first 时添加了hide1 类，因此在此单击之前未注册.hide1
尝试使用 jquery 的 on 将事件绑定到正文

【讨论】：

【解决方案3】：

在定义处理程序时，.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：使用on：

$(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。

【讨论】：

方法 2 也不会绑定任何东西。您是否将on 与live 混淆了？
可能。这里的非 jQuery 用户，只是使用我在 SO 周围捡到的东西。
使用on 委托的正确语法是$(document).on('click', '.hide1', function(){...})。将document 替换为您可以绑定到的最近的父级。