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

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

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

我是jQuery的新手，任何帮助都将不胜感激

谢谢,

乔恩

以下是我的产品的HTML：

吉尔丹
吉尔丹衬衫
20美元

吉尔丹
吉尔丹衬衫
20美元

下面是我对quickView按钮的JavaScript/jQuery：

$（'#productGrid li'）.mouseover（function（）{

$（this.addClass（'trigger'）；//将类触发器添加到li元素

$（'.trigger'）.mouseover（函数（）{//显示quickView

$（'.quickView'）.show（）；

}）；//结束触发器鼠标悬停

}）；//结束#将鼠标悬停在

$（'#productGrid li'）.mouseout（function（）{

$（'.trigger'）.mouseout（函数（）{//隐藏快速视图

$（'.quickView'）.hide（）；

}）；//结束触发鼠标输出

$（'#productGrid li'）。removeClass（'trigger'）；

}）；//结束#productGrid li鼠标退出

两件事：

您需要将

$（'.trigger'）.mouseover（）

（和

mouseout（）

）处理程序移到其他mouseover处理程序之外，否则每次都会重新绑定。您只需要定义一次。编辑：事实上，我根本不明白为什么要动态添加

触发器
类。只需将它放在html中开始，或在
li
悬停上显示quickView

您看到所有这些的原因是

$（'.quickView'）.show（）

。使用该语句，您将使用

quickView

类选择所有元素，而不仅仅是最近的元素。由于quickView元素位于

li

元素中，因此您只需要获取该元素

$（this.parents（“.li”）.find（“.quickView”）.show（）

---

请签出此项：。。。看来jqzoom是一个很好的插件@SethenMaleno说jqzoom真的很好。谢谢你帮了苏太多！非常感谢。我添加“trigger”类的唯一原因是想看看是否可以“挑出”每个li元素，因为所有li元素上都显示了“快速查看”按钮。我对这一切都不熟悉，因此添加触发器类是一种尝试和错误最初，我只为quickView设置了隐藏/显示。我试试你的推荐。很快给你回电话。