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

クラスを動的に追加/削除するということは、クリックされたとき
にクラスを追加することを意味するため、このクリックの前に、が登録されていない ため、 jqueryを使用してイベントを本文にバインドしてみてください。hide1.first.hide1

于 2013-02-10T19:18:17.517 に答える
-1

ハンドラーを定義する時点では、.hide1ボタンはまだ存在していないため、イベントをバインドしません。これを回避する方法は2つあります。

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 に答える