我试图模仿使用jquery加载多个列表项的ajax感觉。
最后,我想在点击“加载更多”按钮后显示10个项目,然后再显示10个项目。
我的代码:
<ul id="listings-container">
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
<li>List item ...</li>
</ul>
<a class="button" href="#">Load More</a>
我试过了,simplest way to lazy load long <ul> with many <li>s
我试图通过点击而不是滚动来完成类似的工作。
有什么想法吗?
答案 0 :(得分:1)
<强>的jQuery 强>
$(".button").on("click", function () {
$("#listings-container").find("li:hidden:lt(10)").show();
});
<强> CSS 强>
#listings-container li {
display:none;
}
答案 1 :(得分:1)
如果你正在使用引导程序选项卡面板和延迟加载,它适用于加载第一个标签页(默认有效)但不适用于何时加载单击其他选项卡后,除非滚动,否则不会加载图像。
以下是针对此问题的解决方法,只需添加以下javascript,您就可以了。逻辑很简单,单击选项卡时会触发滚动。
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$(window).trigger('scroll');
});
});
有关shown.bs.tab
及其他功能的详情,请参阅以下链接:http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
希望这会有所帮助。