我需要应用这个小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(),但是如何通过.overlay类和相关的.img-popup来显示相关的div?
或许我可以更改$('.trigger').click(function()
并让它只占用最近的.img-popup div?
提前致谢。
答案 0 :(得分:2)
你可以使用这样的东西来引用正确的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);
}
答案 1 :(得分:1)
您不需要使用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);
});
});
答案 2 :(得分:1)
对于给定的代码,您可以使用siblings()
所以在点击处理程序中使用这些来定位
$(this).siblings('.img-popup');
$(this).siblings('.overlay');
如果您的html变得更复杂,您可以使用.closest()
来获取结果父级,就像这样
var $result = $(this).closest('.result');
$result.find('.img-popup');
$result.find('.overlay');
答案 3 :(得分:0)
另一种方式:
$('.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);
});