将 jquery 函数应用于多个 div

Question

我需要应用这个 jquery 小功能：

    $(function(){
        $('.trigger').click(function(){
            $('.img-popup').fadeIn(500);
            $('.overlay').fadeIn(500);
        });
        $('.overlay').click(function(){
            $('.img-popup').fadeOut(500);
            $('.overlay').fadeOut(500);
        });
    });

到一系列 div：

<td class="result" >
    <div class="trigger"><b>Show image 1</b></div>
    <div class="overlay"></div>
    <div class="img-popup">
        <img src="imageurl-1">
    </div>
</td>
...
<td class="result" >
    <div class="trigger"><b>Show image 2</b></div>
    <div class="overlay"></div>
    <div class="img-popup">
        <img src="imageurl-2">
    </div>
</td>

最好的方法是什么？

我觉得我应该在某个地方使用 .each()，但是我怎样才能得到相关的 div 和 .overlay class 以及相关的 .img-popup 来显示？

或者我可以只更改 $('.trigger').click(function() 并让它只接受最近的 .img-popup div？

提前致谢。

Answer 1

您可以使用类似这样的内容来引用正确的 img：

$(".trigger").click(function(){
   $(this).siblings('.img-popup').fadeIn(500);
   $(this).siblings('.overlay').fadeIn(500);
}
$(".overlay").click(function(){
   $(this).siblings('.img-popup').fadeOut(500);
   $(this).siblings('.overlay').fadeOut(500);
}

Answer 2

您不需要使用 each() 循环，只需使用 $(this) 作为点击按钮和父选择器，使用 jQuery 来查找 .img-popup 和 .overlay

$(function(){
    $('.trigger').click(function(){
        var element = $(this), parent = element.parent(".result"),
            img_popup = parent.find('.img-popup'), 
            overlay = parent.find('.overlay');
        img_popup.fadeIn(500);
        overlay.fadeIn(500);
    });
    $('.overlay').click(function(){
        var element = $(this), parent = element.parent(".result"),
            img_popup = parent.find('.img-popup');
        img_popup.fadeOut(500);
        element.fadeOut(500);
    });
});

Answer 3

对于给定的代码，您可以只使用 siblings() 所以在点击处理程序内部使用这些来定位

$(this).siblings('.img-popup');
$(this).siblings('.overlay');

如果您的 html 变得更复杂，您可以使用 .closest() 来获取结果父级，就像这样

var $result = $(this).closest('.result');
$result.find('.img-popup');
$result.find('.overlay');

Answer 4

另一种方式：

$('.trigger').click(function(){
    $(this).parent().children('.overlay').eq(0).fadeIn(500).parent().children('.img-popup').eq(0).fadeIn(500);
});

$('.overlay').click(function(){
    $(this).fadeOut(500).parent().children('.img-popup').eq(0).fadeOut(500);
});

将 jquery 函数应用于多个 div

apply jquery function to multiple divs

jquery

overlay