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

尽可能避免使用全局变量。在您的情况下，事件委托是一个更好的选择。如果您对此不熟悉，那么这个想法是这样的：

不要将事件从字面上绑定到您感兴趣的元素，而是将一个事件绑定到一个相互容器，然后检查哪个元素实际触发了它。在涉及许多元素的情况下，这具有明显的性能优势。

$("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 回答