0

これが私の画像の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（）」関数に渡す方法がわかりません。何か案は？

4

2 に答える 2

2

各画像のクリックイベントをバインドして、すべての兄弟要素をフェードさせます。

$('img.polaroid').on('click', function(event) {
  $(this).siblings('.polaroid').animate({opacity: 0}, 500);
});
于 2013-01-10T23:51:24.030 に答える
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);
    });
})
于 2013-01-10T23:49:58.627 に答える