jQuery-循环浏览图像并隐藏除单击的图像之外的所有图像

jQuery - Loop through images and hide all but clicked image

本文关键字：图像 单击 循环 浏览 隐藏 jQuery-      更新时间：2023-09-26

这是我的图像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(("函数中。有什么想法吗？

在每个图像上绑定一个点击事件，该事件会淡入其所有兄弟元素。

$('img.polaroid').on('click', function(event) {
  $(this).siblings('.polaroid').animate({opacity: 0}, 500);
});

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);
    });
})
相关文章：