javascript - 添加显示后检测元素的可见性 :none using javascript

Question

我在主容器中有四个 div。

<div id="boxes">
    <div class="inner-box"></div>
    <div class="inner-box"></div>
    <div class="inner-box"></div>
    <div class="inner-box"></div>
</div>

在一个javascript点击事件之后，display: none被添加到他们身上来隐藏。所以我想在没有元素可见时做一些事情。

if ($('#boxes').children(':visible').length == 0) 

上面的代码似乎不起作用，因为它计算了点击事件之前可见元素的数量(即使所有类都有 display: none 它给出计数 4)。

我正在使用 change(); 函数来选择切换显示属性。

演示:http://jsfiddle.net/wnzavyom/1/

Answer 1

基本上每次处理 onclick 事件时，您都必须检查每个元素以查看它是否展示了 css 设置 display: none

( Demo )

JavaScript

$('.inner-box').on("click",function(){
    $(this).css("display","none");
    var visible = false;
    $('.inner-box',$(this).parent()).each(function(){
        if($(this).css("display") !== "none") visible = true;
    });
    if(!visible) alert("All gone");
});