jquery - クリック ハンドラーが 2 回のクリック後に失敗するのはなぜですか?

Question

私の目的は、2 つの画像を上下に切り替えることです。

これは私が持っているもので、部分的に機能します。

これで問題ない場合、何が欠けていますか?
2回クリックすると動かなくなります....

これが私のコードです：

   $(document).ready(function () {
       $(".collapse").click(function () {
           $("#box").hide();
           $(".collapse").replaceWith('<span class="open"></span>');
           $(".open").click(function () {
               $("#box").show();
               $(".open").replaceWith('<span class="collapse"></span>');
           });
       });
   });

Answer 1

わかりました...あなたの代わりにreplaceWith：

$(".open").removeClass("open").addClass("collapse");
//and
$(".collapse").removeClass("collapse").addClass("open");

を次のように変更.clickします ( を使用on(...)):

$(document).on("click", ".collapse", function () {
    ....
});

---

それをすべてまとめると：

$(document).ready(function () {
   $(document).on("click", ".collapse, .open", function () {
       $("#box").toggle();
       $(this).toggleClass("open", "collapse"); //toggles btw the two classes
   });
});

Answer 2

代わりにCssを使用することをお勧めします。

jQuery:

$(".collapse").toggleClass('closed')

CSS:

.collapse { 
    background: url(image/arrow-up.jpg); 
}
.collapse.closed {
    background: url(image/arrow-down.jpg); 
}
.collapse > #box {
    display: block;
}
.collapse.closed > #box {
    display: none;
}

この助けを願っています。

Answer 3

2 つのクリック イベントを囲んでいます。それを分離します。以下のコードを試してください

 $(document).ready(function() {
            $(".collapse").click(function() {
                $("#box").hide();
                $(this).removeClass('collapse');
                        $(this).addClass('open');
            });
            $(".open").click(function() {
                $("#box").show();
                $(this).removeClass('open');
                        $(this).addClass('collapse');
            });
        });