我有隐藏的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
});
最佳答案
像这样的事情怎么样:
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/
关于jquery - 点击按钮jquery时显示更多div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21974235/