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();
    }
}

jQuery显示隐藏下一页项目

1 个答案: