如何一次加载多个div [英] How to load more than one div at a time
本文介绍了如何一次加载多个div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有5个div并带有loadmore按钮,该按钮一次显示一个隐藏的div.一旦显示了最后一个div,显示按钮就会被禁用.
I have 5 divs accompanied with a loadmore button which displays one of the hidden divs at a time. The display button then becomes disabled once the last div has been displayed.
如何一次显示2个div,而不显示一个?
How do I display 2 divs at time instead of one?
<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>
<div class="group" id="group5">
4 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
});
到目前为止,我有以下jquery加载1 div但不加载2
So far I have the following jquery which loads 1 div but not 2
jQuery
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');
}
});
演示: http://jsfiddle.net/8Re3t/7/
推荐答案
只需添加var $hidden1 = $group.filter(':hidden:first').addClass('active');
如下所示,它将起作用:)
Just add var $hidden1 = $group.filter(':hidden:first').addClass('active');
as below and it will work :)
var $group = $('.group');
$("#load-more").click(function() {
if ($(this).hasClass('disable')) return false;
var $hidden = $group.filter(':hidden:first').addClass('active');
var $hidden1 = $group.filter(':hidden:first').addClass('active');
if (!$hidden.next('.group').length) {
$(this).addClass('disable');
$(this).next().addClass('disable');
}
});
这篇关于如何一次加载多个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文