2

我正在尝试更改按钮的类，因此当单击它时，它会隐藏一个 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 开发工具确认）。但是当我再次点击它时，什么也没有发生..

任何帮助，将不胜感激！

4

3 回答 3

5

动态更改 html 时可以使用委托。看到这个小提琴。

$('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");
});
于 2013-02-10T19:22:13.817 回答
0

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

于 2013-02-10T19:18:17.517 回答
-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：使用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 是首选。

于 2013-02-10T19:17:30.223 回答