这是我的图片的HTML:
<img id="polaroid1" class="polaroid" onclick="fadeImages(this)" src="images/polaroid1.png">
<img id="polaroid2" class="polaroid" onclick="fadeImages(this)" src="images/polaroid2.png">
<img id="polaroid3" class="polaroid" onclick="fadeImages(this)" src="images/polaroid3.png">
用户单击任何这些图像后,会调用fadeImages()函数。这是我的JavaScript和jQuery:
function fadeImages(e) {
var clickedImage = $(e).attr('id');
$('img').each(function() {
if($(this).attr('id') != clickedImage) {
$('img').animate({opacity: 0}, 500);
}
});
}
基本上,我想要所有图像但点击的图像淡出,但我不知道如何将点击的图像ID传递给'each()'函数。有什么想法吗?
答案 0 :(得分:2)
在每张图片上绑定一个点击事件,它会淡化所有兄弟元素。
$('img.polaroid').on('click', function(event) {
$(this).siblings('.polaroid').animate({opacity: 0}, 500);
});
答案 1 :(得分:1)
function fadeImages(e) {
$('.polaroid').not(e).animate({opacity: 0}, 500);
}
更好的方法是删除图片上的onclick
并使用jQuery的强大功能......
喜欢这个......
$(function(){
var $imgs = $('.polaroid');
$imgs.click(function(){
$imgs.not(this).animate({opacity: 0}, 500);
});
})