0

クリック時に表示/非表示にするdivがあり、このdivはajaxロードを介してme.htmlからコンテンツをロードします。このタグに追加されたクラスクラスを追加しています。クラスが追加されたタグをもう一度クリックすると、divが非表示になります。しかし、これは機能しません。

$(function() {
    $("#nav a").click(function() { 
        $(this).toggleClass('added');
        if($(".o1").length <= 0) { 
            $("body").append('<div class="o1"></div>');
            $(".o1").load("me.html").css("display","block");
        }
        $(".added").click(function() { 
            $(".o1").css("display","none");
        })
    });
});

何か案は？

4

2 に答える 2

1

これを試して。オブジェクトが存在しない場合、これによりオブジェクトがセットアップされます。その後、それが行われると、それは将来のクリックのためにそれを切り替えます。

$(function() {
    $("#nav a").click(function() { 
        $(this).toggleClass('added');
        if($(".o1").length <= 0)
        { 
            $("body").append('<div class="o1"></div>');
            $(".o1").load("me.html");
        } else if($(this).hasClass("added"))
            $(".o1").hide();
        } else {
            $(".o1").show();
        }
    });
});

clickコード内のすべてのリンクにハンドラーを追加する.addedと、問題が発生します。

これは、何が起こっているかのタイムラインを示しています。あなたがフォローできることを願っています。括弧内の数字はイベントです。同じ番号は、それらが同時に発生することを意味します。

（1）#nav aがクリックされ、次にクラス #nav aが追加され、クラスを持つリンクがクリックイベントを取得しますadded .o1added

（2）#nav aクリックしてから #nav aクラスを削除し、そのクラスがadded すでに .o1存在している場合、クラスを持つリンクはクリックaddedイベントを取得します（ただし、このリンクは削除されていないため、以前のクリックイベントが残っています）。

（2）.addedは、（1）の間に添付されたため、上記のアクションと同時にクリックされたと見なされます。

（3）#nav aがクリックされ、次に #nav aクラスが存在し、クラスを持つリンクがadded クリック イベントを取得します.o1added

（3）.addedは、（1）の間に添付されたため、上記のアクションと同時にクリックされたと見なされます。

（4）#nav aがクリックされた後 #nav a、クラスを取得し、added すでに .o1存在している場合、クラスを持つリンクはクリックaddedイベントを取得します

（4）.addedは、（1）の間にアタッチされたため、上記のアクションと同時に.addedクリックされたと見なされます。（4）は、（3）の間にアタッチされたため、上記のアクションと同時にクリックされたと見なされます。

など..。

把握する重要なことはclick、イベントを切り離すのではなく、ますますアタッチすることです。

于 2012-09-02T10:15:22.533 に答える
0

これを試して...

<div class="o1"></div>

$(".o1").hide();

$(function() {

    $("#nav a").click(function() { 

            $(this).toggleClass('added');


            if($(this).hasClass('added') == false){ 

                    $(".o1").load("me.html", function(){$(".o1").show()});

                }

            if($(this).hasClass('added') == true){ 

                    $(".o1").hide();

                })
      });
});
于 2012-09-02T10:20:16.680 に答える