1

だから私は、要素がホバーされている場合にのみ何かを行う .hover() メソッドを使用しようとしていますが、特定のクラスはありません。HTMLで問題の要素にクラスを追加するとうまくいきます。しかし、.addClass() を使用して jQuery を使用してクラスを追加するクリック イベントがあるとします。hover() メソッドは、追加されたクラスを無視します。十分なとりとめ。これがコードです。

$('.foo:not(.bar)').hover(function() { 

    someCrap();  //when hovering a over .foo that doesn't also have the class .bar, do someCrap

}

$('.foo').click(function(){

    $(this).addClass('bar'); //after the element .foo gets another class .bar, the hover event written earlier continues to work, WTF

})

男と女のアイデアはありますか？

4

3 に答える 3

4

.hover()すでに作成されている要素にのみイベントを追加します。.on()将来の要素のイベントの作成にも使用する必要があります。これは、親も設定する必要があることを意味します。パフォーマンスを節約するために、親はマウスイベントが必要な子にできるだけ近い必要があります。

$('#parent').on({
    mouseenter : function() {
        "use strict";
        // Do something
    },
    mouseleave: function() {
        "use strict";
        // Do something
    }
}, ".foo:not(.bar)");
于 2012-08-23T21:46:34.147 に答える
1

セレクター$(selector).hover(fn);に一致する要素を実行すると、イベントがそれらにバインドされます。後でその要素が一致しなくなるセレクターに関する何かを追加/変更/削除した場合、イベントは既にバインドされているため気にしません。

これを処理する方法はいくつかありますが、実際にはアプリケーション内の JavaScript の量とユース ケースの詳細によって異なります。

1)イベント デリゲーションを使用できます。これは、JavaScript イベントがバブリングする方法を利用して、ページの特定の部分の親要素にイベントをバインドし、イベントが発生したときにロジックを実行できるようにします。これはいくつかの理由で非常に便利です。1 つ目は、100 レコードのテーブルと、edit誰かがクリックしたときに特定の JavaScript 関数を起動する のクラスを持つリンクがあるとします。もしあなたがそうするなら$('a.edit').click(fn);jQuery は、100 の異なるイベントを個々の要素にバインドすることになります。これにより、アプリケーションが古いマシン/ブラウザーで苦労するようになる可能性があります。第 2 に、物事が動的に変化した場合 (テーブルに新しい行を追加したり、特定の行を編集可能にしたくないためにリンクから編集クラスを削除したりした場合)、イベントが十分にスマートに認識できるようにします。何が起こっているのか、まだ機能しています。jQuery では、.on()この関数を使用します。ドキュメントを読んでください。以前のバージョンの jQuery を使用.delegate()している場合は、使用する必要があり、非常に古い jQuery 関数を実行している場合は、.live().

2) アプリケーションが比較的小さい場合のより簡単な方法は、単純にイベントをすべての.foo要素にバインドし、要素が現在 のクラスを持っているかどうかをイベント自体でチェックし、持ってbarいない場合は続行することです。

于 2012-08-23T21:54:18.193 に答える
0

私はそれがもっと似ていると思います：

$( '.foo' ).hover(
 function() { if ( $( this ).has( '.bar' ) ) {} else { // do something } },
 function() { if ( $( this ).has( '.bar' ) ) {} else { // do something } }
);
于 2012-08-23T21:53:56.663 に答える