0

私はいくつかのjQueryと無限スクロールを使用しており、無限スクロールを介して引き込まれている新しいコンテンツのいくつかは、いくつかのホバー効果などのためにいくつかの単純なjQueryを使用しています。

$(".grid-landing-page a").hover(function () {
$(this).children('.preview-project-title').toggleClass("preview-project-title-on");
});

使用している石積みですでに行ったように、これを無限スクロールのコールバックに追加する必要があります。

function( newElements ) {
    var $newElems = $( newElements );
    $('.grid-landing-page-container').masonry( 'appended', $newElems );
}

私は、toggleClassコードをグローバル変数にして、無限スクロールのnewElementsでコールバックできるようにするのが良いかどうかを知りたいと思っています。もしそうなら、私がこれを行う方法について何か助けはありますか？または、これを行うためのより良い方法がある場合は、助けていただければ幸いです。

ありがとう、R

4

1 に答える 1

2

可能な限りグローバルを避けてください。あなたの場合、イベントの委任がより良いオプションです。あなたがこれに不慣れであるならば、考えはこれです：

イベントを文字通り関心のある要素にバインドする代わりに、1つのイベントを相互コンテナにバインドしてから、どの要素が実際にそれをトリガーしたかを確認します。これには、多くの要素が関係する場合に明らかなパフォーマンス上の利点があります。

$("body").on('hover', '.grid-landing-page a', function () {
    $(this).children('.preview-project-title').toggleClass("preview-project-title-on");
});

コンテナ（本体）の選択をより具体的なものに変更することをお勧めします。

舞台裏で起こっていることは、マウスが体の上に置かれるたびに技術的にイベントが発生することです-しかし、イベントが一致する要素によって開始されたと見なされるまで.grid-langing-page a、jQueryはそのコールバックコードを発生させません。

したがって、このコンテキストチェックは、イベントバインディング（元のコード）の時点ではなく、イベントの発生時に行われるため、現在および将来の一致する要素の両方で機能します。再バインドする必要はありません。

于 2012-07-14T18:15:42.073 に答える