所有Div都可见时隐藏按钮

时间:2015-12-30 05:00:03

标签: javascript jquery

我有以下HTML:

<div class="persons">
    <div class="per1"></div>
    <div class="per2"></div>
    <div class="per3"></div>
    <div class="per4"></div>
    <div class="per5"></div>
    <div class="per6"></div>
    <div class="per7"></div>
    <div class="per8"></div>
    <div class="per9"></div>
    <div class="per10"></div>
</div>

<a id="add-person" href="#" class="button brand">Add Person Involved</a>

默认情况下隐藏第一个div(per1)以外的所有内容。

然后使用以下JS,如果有人点击按钮,我可以显示下一个div。

$("#add-person").click(function(){
    if ($(".persons div:visible").next().length != 0){
        $(".persons div:visible").next().slideDown('slow');
    }
    return false;
});

这样可行,但我的问题是一旦第10个div变得可见,我希望隐藏Add Person Involved按钮。

我尝试将以下代码添加到上面的点击功能中,但它不起作用:

if ( $(".persons div:visible").length === 10){
    $("#add-person").hide();
}

如果第10个div(又名class="per10")变得可见,我该如何隐藏按钮?

1 个答案:

答案 0 :(得分:2)

你可以检查:隐藏在div之后隐藏

if ( $(".persons div:hidden").length == 0){
    $("#add-person").hide();
}

您可以尝试使用:last()可见,并检查is("hidden")是否有下一个div

$("#add-person").click(function(){
    if ($(".persons div:visible:last").next().is(':hidden')){
        $(".persons div:visible:last").next().slideDown('slow' , function(){
            if ( $(".persons div:hidden").length == 0){
                $("#add-person").hide();
            }
        });
    }
});

Working Demo

而不是在css中使用

.per2, .per3, .per4, .per5, .per6, .per7, .per8, .per9, .per10{
  display:none;
}

你可以使用

.persons > div{
    display : none;
}

.persons > div[class^="per"]{  // this mean div with class starts with per
     display : none;
}