淡出圖像（有一個id）點擊的圖像（所以ID是未知的，直到點擊）

Question

比方說，我有一個頁面上有10個圖像，我想隱藏圖像時點擊它。

每張圖片都有一個id：figure1，figure2，figure3，figure i ++。

當然，我可以寫這個

$('#figure1').on('click', function() { 
    $(this).hide(); 
}); 

$('#figure2').on('click', function() { 
    $(this).hide(); 
}); 

$('#figure3').on('click', function() { 
    $(this).hide(); 
}); 

等等，但顯然這不是很好。

我想過的另一件事是創建一個函數並使用onclick =「theFunction（id）」觸發它，然後我可以在函數內隱藏正確的圖像，因爲它知道圖像的id，但是當頁面加載，顯然JS不知道我要刪除哪個ID。我怎麼能使這個動態？

有什麼建議嗎？

錯誤我用的是類，而不是ID在我的功能：/

function deletePhoto(photo_id, photoPosition) { 
    $('#photoFigure' + photoPosition).fadeOut(2000); 
} 

調用，如：

<div class="deletePhoto" onclick="deletePhoto({$value['id']}, {$i})">delete</div> 

Answer 1

你可以給所有的人一個共同的類名說figure和使用，作爲選擇器：

$('.figure').on('click', function() { 
    $(this).hide(); 
}); 

或與你有什麼你可以去與屬性starts-wi次選擇

$('[id^="figure"]').on('click', function() { 
    $(this).hide(); 
}); 

或只是結合所有這些，使一個長期的和醜陋的選擇：

$('#figure1, #figure2, #figure3').on('click', function(){ 
    $(this).hide(); 
}); 

對於你的問題的第二部分，你可以刪除那些在線點擊屬性，並添加一個數據 - 屬性保存照片像在那裏，只是用它來刪除，如果你有一個一致的HTML結構，那麼你不需要事件，你可以選擇相對於deletePhoto按鈕的照片。

<div class="deletePhoto" data-photoid="#photoFigure{$i}">delete</div> 

和

$('.deletePhoto').on('click', function(){ 
     $($(this).data('photoid')).fadeOut(2000); 
     //<-- fade out won't delete the element from DOM instead if you really want to remove then try as mentioned below. 
     //$($(this).data('photoid')).fadeOut(2000, function(){$(this).remove();}); 
}); 

Answer 2

OR能使用多個這樣的選擇他們：

而且PLZ注意你在你的JQ代碼所缺少)。

鏈接：http://api.jquery.com/multiple-selector/

示例代碼

$('#figure1,#figure2,#figure2').on('click', function() { 
    $(this).hide(); 
}); 

Answer 3

$(body).on('click','img',function() { 
    var fig = $(this).attr('id'); 
    $('#' + fig).fadeOut(); 
});