Question

我有隐藏的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;
}

如果需要，您还可以取消绑定点击事件：$(this).addClass('disable').off('click');

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

Answer 2

如果您愿意，可以将我的解决方案作为不同的答案发布。皮肤猫不止一种方法（注意：我不容忍剥皮猫）

$("#load-more").click(function(e) {
    // show the next hidden div.group, then disable load more once all divs have been displayed
    var t = $(this);
    if (t.data('disabled')){
        return;
    }

    var hiddenGroups = $('.group:not(:visible)');
    if (hiddenGroups.length > 0){
        hiddenGroups.first().show();
    } else{
        t.data('disabled', true);
    }
});

http://jsfiddle.net/8Re3t/3/

单击按钮jquery时显示更多div

2 个答案:

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