Jquery如何测试当前悬停的div是否为eq(x)

Question

我正在尝试创建一个 jQuery 悬停函数，该函数将根据 div 的 EQ（索引位置编号）数字突出显示页面的不同部分。

我想做的是说“当你将鼠标悬停在 #photoContent div 上时，检查它的 EQ 编号是什么。如果它是第 X 个 div，则突出显示侧栏中的第 Y 个 p”

    $('#photoContent div').hover(function () {  
        if( $(this).filter(':lt(5)') ) {
            $('#photoSidebar').find('p:eq(0)').addClass('currentPhoto');
        }

        if( $(this).filter(':gt(5)') ) {
            $('#photoSidebar').find('p:eq(1)').addClass('currentPhoto');
        }
    }, function () {
        $('#photoSidebar').find('p').removeClass('currentPhoto');
    });

上面的代码显然没有实现这一点，但是概念/功能就是我想要的。感谢您的帮助！

Answer 1

首先，hoverIntent 不是内置的 jQuery 事件。您的意思是 hover(fnOver, fnOut) 吗？

其次，您可以重写 if 语句来显式测试匹配：

if($(this).is(":lt(5)")) { 
    $('#photoSidebar p').eq(0).addClass('currentPhoto');
}

if($(this).is(":gt(5)")) {
    $('#photoSidebar p').eq(1).addClass('currentPhoto');
} 

OR

var idx = $(this).index();
if(idx > 5) { 
    $('#photoSidebar p').eq(0).addClass('currentPhoto');
}

if(idx < 5) {
    $('#photoSidebar p').eq(1).addClass('currentPhoto');
} 

另外，这只是我的风格，但为什么不使用正则引号 " 而不是单引号呢？

Answer 2

我相信我使用 index() 属性找到了我正在寻找的内容：

    var divIndex = $(this).index();
        if (divIndex<=4) {
              //...
        }

这有帮助：
在 Jquery 中，如何找出被单击元素的“eq”？

Answer 3

我不知道为什么你的代码不起作用，除了杰夫指出的 hoverIntent 用户之外，但考虑到它们都在同一个文档中，这有点令人费解，你不能去吗with：

$('#photoContent div').hover(function () {    
    if( $(this).filter(':lt(5)') ) {
        $('#photoSidebar p:eq(0)').addClass('currentPhoto');
    }

    if( $(this).filter(':gt(5)') ) {
        $('#photoSidebar p:eq(1)').addClass('currentPhoto');
    }

    $('#photoSidebar p').removeClass('currentPhoto');
});

我也不知道为什么最后一点是一个函数，因为你可能希望它只在悬停时触发。

我不确定上面的方法是否有效，因为我对 filter() 方法非常不熟悉，但它看起来是正确的。它会让你更亲近吗？