jQuery显示隐藏下一个上一页项目

Question

我有以下HTML代码，我真的很难为以下内容找到解决方案：(请回答伪代码、javascript或jquery，但更喜欢jquery(

• 加载页面时，隐藏除第一个外的所有列表项5(只显示前五个，按唯一id选择(
• 打开两个按钮在列表的底部，一个代表"旧"，一个表示"新">
• 当较老的btn按下，显示列表中的下一个5(如果共有6个(
• 按下"更新"时，在当前列表项前面显示5
• 如果第一页上已有新按钮，则隐藏该按钮5

代码：

<div class="container">
<div class="list-item" id="13">
<p>First Item</p>
</div>
<div class="list-item" id="12">
<p>Second Item</p>
</div>
<div class="list-item" id="11">
<p>Third Item</p>
</div>
<div class="list-item" id="10">
<p>Fourth Item</p>
</div>
<div class="list-item" id="9">
<p>Fifth Item</p>
</div>
<div class="list-item" id="8">
<p>Sixth Item</p>
</div>
… ( more list-items)
</div>
<button onclick="showOlder()">Older</button>
<button onclick="showNewer()">Newer</button>

Answer 1

经过进一步的研究和反复试验，我终于找到了解决方案。我想如果其他人正在寻找类似的东西，我会把它发布出来。请注意，我不是jQuery的专家，这段代码可能可以用更优化的方式完成。

$(document).ready(function () {
btnNewer.hide();
for (i = numOfItems; i >= 1; i--) {
if (i == numOfItems - (5 * page)) {
page++;
}
$("#" + i).addClass("Page-" + page);
}
for (i = 0; i <= numOfPages; i++) {
if (i != 1) {
hidePage(i);
}
}
});
var numOfItems = $('div.list-item').length;
var numOfPages = Math.ceil(numOfItems / 5);
var page = 1;
var currentPage = 1;
var btnOlder = $("#showOlder")
var btnNewer = $("#showNewer")

function hidePage(pageNum) {
$('.Page-' + pageNum).hide();
}
function showPage(pageNum) {
$('.Page-' + pageNum).show();
}

btnOlder.on("click", function () {
hidePage(currentPage);
currentPage++;
showPage(currentPage);
CheckIfOnLastPage();
CheckIfOnFirstPage();
})
btnNewer.on("click", function () {
hidePage(currentPage);
currentPage--;
showPage(currentPage);
CheckIfOnFirstPage();
CheckIfOnLastPage();
})
function CheckIfOnFirstPage() {
if (currentPage == 1) {
btnNewer.hide();
} else {
btnNewer.show();
}
}
function CheckIfOnLastPage() {
if (currentPage == numOfPages) {
btnOlder.hide();
} else {
btnOlder.show();
}
}