不同图像的相同javascript事件？

我有一个图像，当悬停时，一个覆盖的div会淡入淡出

<div id="img-one">
    <div id="overlay-one">
          <div class="card-overlay-text">
              <p>Enlarge Image<p></div>
         </div>
    <img src="assets/img/card_one.jpg" alt="" />
</div>

---

你最好使用类。然后像这样做：

$('.main-container').find('.div-class-name').forEach(function(el) {
    <bind a handler for each consequent element here>
});

$（'.main container'）.find（'.div类名'）.forEach（函数（el）{
});

---

您将得到一组绑定到每个“.div class name”元素的处理程序。

在所有图像容器

div

和覆盖

div

中使用常规类，如：

<div id="img-one" class='img-container'>
    <div id="overlay-one" class='overlay'>
         ...
    </div>
</div>

希望这有帮助

$（函数（）{
$（'.img container'）.hover（函数（）{
$（'.overlay'，this.stop（true，true.fadeIn（）；
}，函数（）{
$（'.overlay'，this.stop（true，true.fadeOut（）；
});
});
.img容器{
背景颜色：绿色；
}

放大图像1
放大图像2
放大图像3
建议使用
类
，因为这是类的用途，id不是

如果您的案例要求您无法控制HTML部分，则在某些情况下可以在属性选择器中使用通配符。像
div[id^=overlay]
to选择所有
div
和
id
以
overlay开始


$（函数（）{
$（'div[id^=img]'）。悬停（函数（）{
$（'div[id^=overlay]'，this）.stop（true，true.fadeIn（）；
}，函数（）{
$（'div[id^=overlay]'，this）.stop（true，true.fadeOut（）；
});
});
div[id^=img]{
位置：相对位置；
高度：100px；
宽度：100px；
边框：1px纯黑；
保证金：2倍；
}
div[id^=img]>div[id^=overlay]{
位置：绝对位置；
背景：rgba（0,0,0,2）；
排名：0；
左：0；
右：0；
底部：0；
显示：无；
宽度：100px；
颜色：#fff；
}

放大图像1
放大图像2
您可以尝试使用jQuery Easy Overlay插件

在代码中，应为图像分配一个类，并调用以下语句（该语句适用于每个图像）：

如果页面中有fontawesome，则在上面的代码之前执行此操作（否则插件将在覆盖div中使用fontawesome微调器）：

$（'.main container'）。find（'.div class name'）。forEach
与
$（'.main container.div class name'）相同。hover
？OP希望将各个处理程序绑定到每个.div class name。
（'.class name'）。on（'click'，myFunc）
将事件处理程序附加到具有class
class name
的每个元素。jQuery自动完成这项工作，无需
forEach
<div id="img-one" class='img-container'>
    <div id="overlay-one" class='overlay'>
         ...
    </div>
</div>

$(function() {
   $('.img-container').hover(function() { 
     $('.overlay', this).stop(true,true).fadeIn(); 
   }, function() { 
     $('.overlay', this).stop(true,true).fadeOut(); 
   });
});

jQuery("img.yourclass").hover(function(){
    jQuery(this).easyOverlay("start");
}, function(){
    jQuery(this).easyOverlay("stop");
});

jQuery.fn.easyOverlay.options = { spin: false }