jQuery加载前3个元素，单击“加载更多”以显示下5个元素
我有一个无序列表：
Load more我希望用另一个HTML文件中的列表项填充此列表：
One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen
我想加载前3个列表项，然后在用户点击“加载更多”div时显示接下来的5个项目：
$(document).ready(function () { // Load the first 3 list items from another HTML file //$('#myList').load('externalList.html li:lt(3)'); $('#myList li:lt(3)').show(); $('#loadMore').click(function () { $('#myList li:lt(10)').show(); }); $('#showLess').click(function () { $('#myList li').not(':lt(3)').hide(); }); });
我需要帮助，因为我希望“加载更多”以显示接下来的5个列表项，但如果HTML文件中有更多列表项，则再次显示“加载更多”div并允许用户显示下一个5项，重复此项，直到显示整个列表。
我怎样才能做到最好？
我创建了以下jsfiddle： http ： //jsfiddle.net/nFd7C/
工作演示： http ： //jsfiddle.net/cse_tushar/6FzSb/
$(document).ready(function () { size_li = $("#myList li").size(); x=3; $('#myList li:lt('+x+')').show(); $('#loadMore').click(function () { x= (x+5 <= size_li) ? x+5 : size_li; $('#myList li:lt('+x+')').show(); }); $('#showLess').click(function () { x=(x-5<0) ? 3 : x-5; $('#myList li').not(':lt('+x+')').hide(); }); });
新JS显示或隐藏更多负载并显示更少
$(document).ready(function () { size_li = $("#myList li").size(); x=3; $('#myList li:lt('+x+')').show(); $('#loadMore').click(function () { x= (x+5 <= size_li) ? x+5 : size_li; $('#myList li:lt('+x+')').show(); $('#showLess').show(); if(x == size_li){ $('#loadMore').hide(); } }); $('#showLess').click(function () { x=(x-5<0) ? 3 : x-5; $('#myList li').not(':lt('+x+')').hide(); $('#loadMore').show(); $('#showLess').show(); if(x == 3){ $('#showLess').hide(); } }); });
CSS
#showLess { color:red; cursor:pointer; display:none; }
工作演示： http ： //jsfiddle.net/cse_tushar/6FzSb/2/
简单而且变化不大。 并且在加载整个列表时还会隐藏更多负载。
jsFiddle 在这里 。
$(document).ready(function () { // Load the first 3 list items from another HTML file //$('#myList').load('externalList.html li:lt(3)'); $('#myList li:lt(3)').show(); $('#showLess').hide(); var items = 25; var shown = 3; $('#loadMore').click(function () { $('#showLess').show(); shown = $('#myList li:visible').size()+5; if(shown< items) {$('#myList li:lt('+shown+')').show();} else {$('#myList li:lt('+items+')').show(); $('#loadMore').hide(); } }); $('#showLess').click(function () { $('#myList li').not(':lt(3)').hide(); }); });