jquery 显示/隐藏 div 和一个计数器

Question

我有随机数量的 DIV(最少 1 个，最多 10 个)

<div id="container">
<div class="foo">Content</div> <!-- div 1 -->
<div class="foo">Content</div> <!-- div 2 -->
<div class="foo">Content</div> <!-- div 3 -->
<div class="foo">Content</div> <!-- div 4 -->
<div class="foo">Content</div> <!-- div 5 -->
<div class="foo">Content</div> <!-- i need this one hidden -->
<div class="foo">Content</div> <!-- and this one -->
</div>

我希望前 5 个 div 可见(使用 .show() 或类都无所谓)。任何额外的 DIV 都应该被隐藏。

然后我模拟一个 div 的“关闭”:

$('.foo').click(function(){
    $(this).fadeOut('slow');    
});

删除点击的 div，导致下面的所有 div 向上移动一个。这是我想要的效果。

但是，我在这里需要一些逻辑。

如果我的 DIVS 少于 5 个，关闭工具应该被禁用。如果我有 5 个以上的 DIV，那么当一个 div 被“关闭”时，我希望下一个“隐藏”的 div 变得可见。

如果需要，我可以为每个 DIV 添加 ID，例如“foo1”、“foo2”等 ID。

Answer 1

像这样的东西应该可以工作:

$("#container .foo:gt(4)").hide();

$("#container").delegate(".foo", "click", function() {
    if(!$("#container .foo:hidden").length) return;
    $(this).fadeOut('slow', function() { 
        $(this).siblings(":hidden:first").fadeIn()
               .end().remove();
    });
});

You can test it out here .它所做的是使用 :gt(4) 隐藏所有过去的 5 (基于 0 的)选择器。然后我们使用 .delegate()为了提高效率(尽管 .click() 也可以)。如果没有更多隐藏，则没有效果。如果还有更多的隐藏，淡出我们点击的那一个，在淡出结束时显示:first。 :hiddden一，和.remove()我们完全淡出的那个。