jquery - jQuery隐藏对象检查

Question

可能重复：
JQuery 隐藏对象

我第一次再次发布这个问题，很多人不明白。好的，我将再次更改我的问题，消除混淆部分。

我有 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');
    }
});

score 1 · Accepted Answer

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

$('#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');
        }
    });
});

score 1 · Accepted Answer

JSFiddle

您需要创建一个function来执行检查，因为为相应的. 你拥有它的方式是在绑定之后它运行一次语句。按照以下方式进行操作将解决该问题...click eventimageclick eventsif

$(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');
   }

}

score 1 · Accepted Answer

首先，您可以通过对所有以 . 开头的元素使用选择器来消除重复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');
            }
        });
    });
});

score 1 · Accepted Answer

使用 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");
            }
        });
    });
});

score 0 · Accepted Answer

这将做你想要的，简化：

        $('#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 的原始代码。

score -1 · Accepted Answer

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

$(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 - jQuery隐藏对象检查

6 回答 6

Related

Reference