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。我怎么能让这种动态变化？

有什么建议吗？

我在我的函数中使用了class而不是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();
});

或者你拥有的东西可以使用属性开始 - 使用选择器

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

或者只是组合所有这些并制作一个长而丑陋的选择器：

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

对于你问题的第二部分，你可以删除那些内联点击属性并添加一个数据属性保存photoid，只是用它来删除，如果你有一致的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 可以使用多个选择它们：

另外请注意，您的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();
});

fadeOut一个图像（有一个id）点击图像（所以ID是未知的，直到点击）

3 个答案: