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)

上面的代码似乎不起作用，因为它计算了click事件之前可见元素的数量（即使所有类都有display: none it gives计数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");
});

Answer 2

您遇到的问题是因为使用异步运行的fadeOut()隐藏了您的方框。这意味着当您检查动画尚未完成的:visible元素的数量时，它们在技术上仍然可见。

要实现您的需求，您应该在fadeOut()方法的回调中运行代码。试试这个：

$('#filter select').change(function () {
     $('.inner-box').fadeOut(function() {
         if ($('#boxes').children(':visible').length == 0) {
             alert('all boxes hidden');
         }
     });
});

Updated fiddle

Answer 3

HTML

<select id="showhide">
    <option>hide</option>
    <option>show</option>
</select>
<div id="boxes">
 <div class="inner-box">one</div>
 <div class="inner-box">two</div>
 <div class="inner-box">three</div>
 <div class="inner-box">four</div>
</div>

脚本

$('.inner-box').hide();
$('#showhide').on('change',function(){
    $('.inner-box').toggle();
    alert($('#boxes').children(':visible').length);
});
alert($('#boxes').children(':visible').length);

<强> Demo

使用javascript添加Display：none后检测元素的可见性

3 个答案: