-1

私はjQueryを初めて使用しますが、これは間違った方法で行っている可能性があります。切り替えられたdivをターゲットにしようとしています。最初のイベントハンドラーは正常に動作します（開いています）が、2番目のイベントハンドラーを動作させることができません（閉じる）。どんな助けでも大歓迎です。

$(".entry .tog").unbind();
  $(".entry .tog").click(function(){
        $(this).closest(".entry").toggleClass("entry-active entry");
        $(".entry").toggleClass("entry not-active");

        alert("open");
})

$(".entry-active .tog").unbind();
  $(".entry-active .tog").click(function(){
        $(this).closest(".entry-active").toggleClass("entry-active entry");
        $(".not-active").toggleClass("not-active entry");

        alert("close");
    })
});
4

3 に答える 3

3

私はあなたがこれを達成しようとしていることを期待しています：

$(".entry .tog").off('click').on('click', function() {
    var $entry = $(this).closest(".entry").toggleClass("active");
    $(".entry").not($entry).removeClass("active");
    alert($entry.hasClass('active') ? "active" : "not active");
});

ノート：

  • 2つのクラスが逆位相で動作しているのは意味がありません。CSSスタイリングであろうとjQuery選択であろうと、あらゆる点で1つのクラスで十分です。
  • クラスを切り替えたくないentry。そうした場合、最初entryにオフに切り替えられた（つまり、クラスが削除された）場合、要素は。で再び選択できなくなり$(".entry")ます。ある日、それは望ましいかもしれませんが、ここではそうではないと思います。
于 2013-01-08T22:28:08.417 に答える
0

このコードは、アクティブに設定してから非アクティブに設定するだけではないでしょうか。

$(this).closest(".entry").toggleClass("entry-active entry");
$(".entry").toggleClass("entry not-active");
于 2013-01-08T22:20:52.453 に答える
0

特に、一度だけ実行されるため、バインド解除のポイントがわかりません（イベントハンドラーや投稿したものから他のものにアタッチされていません）。

私は@Beetrootに同意する傾向があります-Beetrootは、それらを互いにトグルさせようとしないことに関して、Beetrootの答えです。しかし、学習の観点から、私はあなたがやろうとしたことの根本的な問題を指摘します。

基本的な問題は、実行時にこれらの要素に直接バインドしていることです。clickバインドが設定されると、つまり、これらのdivにアタッチされているクラスを変更しても、バインド自体は同じ要素にアタッチされたままになります。これは基本的に、最初のイベントハンドラーのみが何かにアタッチされていることを意味します。これは、呼び出した時点で2番目のイベントハンドラーに一致するものがなかったためです。また、最初のイベントハンドラーを実行してクラスを切り替えた後でも、すべてに接続されているのは1つだけです。

うまくいけば、それは理にかなっています。

これがあなたが書いたものとそれがどのように壊れるかを示すフィドルです

イベントバブリングを使用する必要があります。イベントハンドラーを、これらをカプセル化して動的ではない要素にアタッチし、ハンドラーが実際に呼び出されたものの動的プロパティに基づいて決定を下すことができます。

これを行う方法は、を使用することです.on()（ドキュメントを参照）

.onこれは、次のスクリプトで使用するフィドルです。

$('.wrapper').on('click', ".entry .tog", function() {
    $(this).closest(".entry").toggleClass("entry-active entry");
    $(".entry").toggleClass("entry not-active");

    alert("open");
});


$('.wrapper').on('click', ".entry-active .tog", function() {
    $(this).closest(".entry-active").toggleClass("entry-active entry");
    $(".not-active").toggleClass("not-active entry");

    alert("close");
});

基本的に、.wrapperすべてのエントリとトグを保持するdivにアタッチするクラスを作成しました。イベントハンドラーをそれにバインドし.on()ました。1つのバインディングには最初のクラスセットのセレクターがあり、別のバインディングには2番目のセットがあります。

私はまだ@Beetrootをお勧めします-Beetrootの答えですが、これがここで何が起こったのか、なぜそれが機能しなかったのか、そして将来同様の問題を解決する方法を理解するのに役立つことを願っています。

于 2013-01-08T22:58:59.557 に答える