Javascript 赋予多个div相同的函数

我想用相同的.class创建多个缩略图。缩略图div包含3个其他div。第一个是图像，第二个是出现在鼠标上的描述，第三个是改变不透明度的条

当鼠标悬停在.缩略图上方时，两个元素都应执行其功能

我的问题是，现在每个缩略图都执行该函数，因此每个缩略图现在都高亮显示。我如何更改此选项，使其在上方悬停时仅高亮显示一个缩略图

HTML:

当您这样做时：

$thumb_des.fadeTo(300, 0.8);

它淡入$thumb_des中的所有节点。您需要的是只淡入$thumb中与正确节点对应的节点

试试这个：

for (i = 0; i < $thumb.length; i++)
{
    $thumb[i].mouseenter(function (des) {
        return function() {
            des.fadeTo(300, 0.8);
        };
        }($thumb_des[i]));
    });
}

for（i=0；i<$thumb.length；i++）
{
$thumb[i].mouseenter（函数（des）{
返回函数（）{
des.fadeTo（300,0.8）；
};
}（$thumb_des[i]）；
});
}

您将希望访问该特定缩略图的子对象，类似这样的方式可以工作：

$(this).children('.thumbnail_describe').fadeTo(300, 0.8);

---

这是一个。

您的代码行为类似于此，因为您将

fadeTo

函数应用于

$thumb\u des

和

$thumb\u ft

选择器，它们分别包含页面的所有描述和页脚

相反，您应该在mousenter或mouseleave函数中选择触发鼠标事件的缩略图的描述和页脚

优化代码的另一个方法是只使用一次事件侦听函数，同时对描述和页脚执行两个操作：

$thumb.mouseenter(function() {
    var $this = $(this)
    $this.find('.thumbnail_describe').fadeTo(300, 0.8);
    $this.find('.thumbnail_footer').fadeTo(300, 1); 
});

全工作模式：

$(this).children('.thumbnail_describe').fadeTo(300, 0.8);

$thumb.mouseenter(function() {
    var $this = $(this)
    $this.find('.thumbnail_describe').fadeTo(300, 0.8);
    $this.find('.thumbnail_footer').fadeTo(300, 1); 
});