Question

可能重复：
JQuery hidden objects

我是第一次发布这个问题，很多人都不理解。好的，我会再次改变我的问题，删除混乱部分。

我有4张不同ID的图片。我不能在这里使用类，因为每个图像都与另一个图像有关，所以请忘记这里的类以避免混淆。当用户点击它将隐藏的每个图像时会发生什么。因此，点击4张图片后，当然会隐藏4张图片。

我希望在隐藏4张图像后，会显示一个警告框。请，我必须包含一个代码来验证是否所有图像都隐藏在这里，不要问我为什么要避免再次混淆。单击后图像将隐藏，但唯一的问题是隐藏4个图像后不显示警告框。代码如下：

$(document).ready(function() {

    $('#image1').click(function() {
        $(this).hide('slow');
    });

    $('#image2').click(function() {
        $(this).hide('slow');
    });

    $('#image3').click(function() {
        $(this).hide('slow');
    });

    $('#image4').click(function() {
        $(this).hide('slow');
    });

    if ($('#image1, #image2, #image3, #image4').is(':hidden')) {
        alert('kkk');
    }
});

Answer 1

JSFiddle

您需要创建一个function进行检查，因为click event的回调会针对相应的image触发。你拥有它的方式是在绑定click events后它运行if语句一次。按照以下方式进行操作将解决这个问题......

$(document).ready (function() {

   $('#image1').click(function() {
      $(this).hide('slow', checkImages);
   });

   $('#image1').click(function() {
      $(this).hide('slow', checkImages);
   });

   $('#image2').click(function() {
       $(this).hide('slow', checkImages);
   });

   $('#image3').click(function() {
       $(this).hide('slow', checkImages);
   });


});

function checkImages(){
   if ($('[id^=image]:visible').length == 0) {
     alert('I am a bunny');
   }

}

Answer 2

试试这个 - 将你所有的功能合并到一个......因为它们都做同样的事情

$('#image1,#image2,#image3,#image4').click(function() {
    // hide current clicked
    $(this).hide('slow',function(){
        // check if all the images are hidden
        if ($('#image1,#image2,#image3,#image4').filter(':hidden').length == 4) {
            alert('I am a bunny');
        }
    });
});

Answer 3

首先，您可以通过将选择器用于以image开头的所有元素来消除重复。

$("[id^=image]")选择ID以image开头的所有元素。

然后你必须提供隐藏回调函数，这样它才会在动画结束时运行：

$(document).ready(function() {
    $("[id^=image]").click(function() {
        $(this).hide('slow', function() {
            if ($('[id^=image]:visible').length == 0) {
                alert('I am a bunny');
            }
        });
    });
});

Answer 4

使用hide方法的回调并将if语句移动到click事件中，以便每次点击都会发生。

$(document).ready(function(){
    var images = $("#image1, #image2, #image3, #image4")
    images.click(function(){
        $(this).hide('slow',function(){
            if (images.filter(":visible").length === 0) {
                alert("worky");
            }
        });
    });
});

Answer 5

这将通过简化实现您的目标：

        $('#image1, #image2, #image3, #image4').click(function () {
            $(this).hide('slow', alertIfHidden);
        });

        function alertIfHidden() {
            if (!($('#image1, #image2, #image3, #image4').is(':visible'))) {
                alert('I am a bunny');
            }
        }

请注意，如果至少隐藏了一个图像，则需要检查所有图像是否都不可见，而原始代码则返回true。

Answer 6

每次隐藏图像时，都没有检查是否全部隐藏。这里有很多代码重构

$(document).ready (function() {

$('#image1').click(function() {
$(this).hide('slow');
checkAllHidden();
});

$('#image1').click(function() {
$(this).hide('slow');
checkAllHidden();
});

$('#image2').click(function() {
$(this).hide('slow');
checkAllHidden();
});

$('#image3').click(function() {
$(this).hide('slow');
checkAllHidden();
});


});
function checkAllHidden(){
  if ($('#image1, #image2, #image3, #image4').is(':hidden')) {
    alert('I am a bunny');
  }
}

JQuery隐藏对象检查

6 个答案: