我有 5 个 div,并带有一个 loadmore 按钮,该按钮一次显示一个隐藏的 div。一旦显示最后一个 div,显示按钮就会被禁用。
如何一次显示 2 个 div,而不是 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>
<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
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');
}
});
最佳答案
只需添加 var $hidden1 = $group.filter(':hidden:first').addClass('active');
如下所示,它就会起作用:)
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');
}
});
关于jquery - 如何一次加载多个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38936561/