我想一次只显示 3 个列表项,单击“下一个”和“后退”按钮时,它将分别导航到下一个/上一个列表项。
[1,2,3]
下一步按钮:[2,3,4]
上一个按钮:[1,2,3]
HTML:
<ul id="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
<li>Sixteen</li>
<li>Seventeen</li>
<li>Eighteen</li>
<li>Nineteen</li>
<li>Twenty one</li>
<li>Twenty two</li>
<li>Twenty three</li>
<li>Twenty four</li>
<li>Twenty five</li>
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').click(function () {
x=(x-5<0) ? 3 : x-5;
$('#myList li').not(':lt('+x+')').hide();
});
});
到目前为止的代码:Fiddle
最佳答案
使用一个处理程序处理这两种情况并使用 slice()
的方法。
var $items = $("#myList li");
$items.filter(':lt(3)').show()
$('#loadMore, #showLess').click(function () {
var more = $(this).is('#loadMore'),
first = $items.filter(':visible:first').index(),
start = more ? ++first : --first;
if(start > -1 && start <= $items.length - 3){
$items.hide().slice(start, start+3).show();
}
});
这将在两端停止,因此始终至少有 3 个可见。将由您根据需要在末尾调整按钮可见性/类别
关于javascript - 一次显示 3 个列表项并逐项导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32218668/