jquery - 点击按钮jquery时显示更多div

Question

我有隐藏的div，显示第一个div，我想单击一个按钮来显示一个div，每次单击加载更多链接，然后在加载所有div后禁用该链接。

这是一个 jsfiddle 来帮助说明我正在尝试做的事情:http://jsfiddle.net/8Re3t/1/

<p><a href="#" id="load-more">Load More</a></p>

<div class="group active" id="group1">
    Initially display
</div>

<div class="group" id="group2">
    1 Hide until you click load more
</div>

<div class="group" id="group3">
    2 Hide until you click load more
</div>

<div class="group" id="group4">
    3 Hide until you click load more
</div>

$("#load-more").click(function() {
  // show the next hidden div.group, then disable load more once all divs have been displayed
});

Answer 1

像这样的事情怎么样:

var $group = $('.group');

$("#load-more").click(function() {
    // Prevent event if disabled
    if ($(this).hasClass('disable')) return;

    var $hidden = $group.filter(':hidden:first').addClass('active');
    if (!$hidden.next('.group').length) {
        $(this).addClass('disable');
    }
});

我将类 disable 添加到链接中，以在视觉上使其看起来像已禁用:

#load-more.disable {
    color: #AAA;
    text-decoration: none;
    cursor: default;
}

如果需要，也可以取消绑定(bind)click事件:$(this).addClass('disable').off('click');

演示:http://jsfiddle.net/8Re3t/7/