我试图找出一种方法,使用“加载更多”按钮加载40个div(id =“ dreamz”)
<div id="dreamz">
<button class="accordion" id="borderz">The lunar light<a>2018.12.09</a></button>
<div class="panelz">
<table>
<th width="50%">
<img src="assets/images/dream.jpg" width="100%"/>
<th class="descrip" style="vertical-align: top;" width="50%">
<p>This is the description</p>
</th>
</table>
</div>
</div>
我使用的JavaScript是:
$(function(){
$("div").slice(0, 5).show();
$("#load").click(function(e){
e.preventDefault();
$("div:hidden").slice(0, 5).show();
if($("div:hidden").length == 0){
alert("No more dreams");
}
});
});
这个锚标签是我用作按钮的
<a href="#" id="load">Load More</a>
我已经尝试过infinite scroll,但是没有用。我使用CSS隐藏dreamz ID。
如果有人可以帮助我,将不胜感激。
谢谢!
最佳答案
首先,您应该使用class =“ dreamz”而不是id(id是唯一的)。
然后使用css通过“ display:none;”隐藏类dreamz。
然后你的JavaScript:
$(function(){
$(".dreamz").slice(0, 5).show();
$("#load").click(function(e){
e.preventDefault();
$(".dreamz:hidden").slice(0, 5).show();
if($(".dreamz:hidden").length == 0){
alert("No more dreams");
}
});
});
.dreamz { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<a href="#" id="load">Load More</a>
关于javascript - 配置更多加载按钮,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50043549/