用于快速查看效果的jQuery - 将事件绑定到一个元素

Question

我正在为我的网站创建一个“快速查看”效果。当有人将鼠标悬停在我网站上的某个产品上时，我会在图像上显示一个“快速查看”按钮，以便用户可以点击该按钮并“放大”该产品。我能够使用jQuery在鼠标悬停时显示“快速查看”按钮，我可以在mouseout上隐藏“快速查看”按钮。但是，当我在一个产品上鼠标悬停/鼠标移动时，“快速查看”效果会显示在所有产品上，而不仅仅是我鼠标悬停在的特定产品上。

我的产品位于id = ProductGrid的列表中。 “快速查看”按钮包含在此列表中，并具有一个.quickView类。我尝试使用AddClass（）/ RemoveClass（）函数在li标签中创建一个触发器，但它仍然导致在所有产品上显示“快速查看”。我的目标是只在被悬停的产品上显示“快速查看”按钮一次。我意识到我遇到的问题是mousever事件正在应用于所有元素。不知道如何解决这个问题。

我是jQuery的新手，非常感谢任何帮助。

谢谢，

乔恩

这是我的产品HTML：

<ol id="productGrid">

<li><a href=""><img src=""></a><a href="" class="quickView">Quick View</a><br> <span class="brandName">Gildan</span><br> <span class="productName">Gildan Shirt</span> <br><span class="price">$20</span></li>

<li><a href=""><img src=""></a><a href="" class="quickView">Quick View</a><br> <span class="brandName">Gildan</span><br> <span class="productName">Gildan Shirt</span> <br><span class="price">$20</span></li>

这是我的quickView按钮的JavaScript / jQuery：

$('#productGrid li').mouseover(function() {

$(this).addClass('trigger'); // add class trigger to li element

$('.trigger').mouseover(function() { // shows quickView
        $('.quickView').show();
            }); // end trigger mouseover
            }); // end #productGrid li mouse over

$('#productGrid li').mouseout(function() {

$('.trigger').mouseout(function() { // hides quickView
$('.quickView').hide();
});// end trigger mouseout

$('#productGrid li').removeClass('trigger');

}); // end #productGrid li mouse out

Answer 1

夫妻俩：

1. 您需要将$('.trigger').mouseover()（和mouseout()）处理程序移到其他鼠标悬停处理程序之外，否则您每次都会重新绑定。您只希望定义一次。编辑：事实上，我不明白为什么你要动态添加trigger类。只需将其放在您的html中，或者在li悬停时显示quickView。

2. 您看到所有这些内容的原因是$('.quickView').show()。使用该语句，您将选择具有quickView类的所有元素，而不仅仅是最近的元素。由于quickView元素位于li元素内，因此您只需要获取该元素。

   $(this).parents(".li").find(".quickView").show();