我有以下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"
)变得可见,我该如何隐藏按钮?
答案 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();
}
});
}
});
而不是在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;
}