Question

我正在尝试为某些博客文章设置分页。它适用于第一页，我检查测试以查看循环是否真正填充了“ postsToDisplay”数组（确实如此），但是当我单击第二页按钮时，什么都没有显示。我可以单击首页按钮，它将带回帖子的首页。由于某种原因，它不会将新数组推入页面。

我尝试添加和删除测试以查看有效的方法。数组肯定已被填充，并且循环正在正确地通过正确的“ i”值。

这里有一些经过编辑的代码可以重现我的问题：

//Use this as "scripts.js"


$(document).ready(function() {
  var realBlog = document.getElementsByClassName("realBlog");
  var postsPerPage = 2;
  var $pagination = $(".pagination")

  function showPage(page) {
    $(realBlog).hide();
    let postsToDisplay = [];
    for (let i = 0; i < realBlog.length; i += 1) {
      if (i >= page * postsPerPage && i <= page * postsPerPage + postsPerPage - 1) {
        postsToDisplay.push(realBlog[i]);
        console.log(i); //Test to see if the loop is running the correct numbers
        $(postsToDisplay[i]).show();
      }
    }
    console.log(postsToDisplay); //Test to see if the array is full
    return postsToDisplay;
  }
  showPage(0);

  function createPageNumbers() {
    let createUl = document.createElement("ul");
    createUl.className = "pageNumbers";
    for (let i = 1; i <= Math.ceil(realBlog.length/2); i += 1) {
      let createLi = document.createElement("li");
      let createA = document.createElement("a");
      createA.href = "#" + i;
      createA.textContent = i;
      createLi.className = "pageButton";
      createLi.append(createA);
      createUl.append(createLi);
      $(".pagination").append(createUl);
      createA.addEventListener("click", () => {
        showPage(i-1);
      });
    }
  }

  createPageNumbers();
});

//Use this as index.html


<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="scripts.js"></script>
  </head>
  <body>
    <div class="container realBlog">
      <h1 class="realBlogTitle threeDText">Title</h1>
      <p class="entry"></p>
      <div class="entryInfo">
        <span class="tag1"></span>
        <span class="tag2"></span>
        <span class="date"></span>
        <span class="time"></span>
      </div>
      <div class="borderBottom"></div>
    </div>
    <div class="container realBlog">
      <h1 class="realBlogTitle threeDText">Title</h1>
      <p class="entry"></p>
      <div class="entryInfo">
        <span class="tag1"></span>
        <span class="tag2"></span>
        <span class="date"></span>
        <span class="time"></span>
      </div>
      <div class="borderBottom"></div>
    </div>
    <div class="container realBlog">
      <h1 class="realBlogTitle threeDText">Title</h1>
      <p class="entry"></p>
      <div class="entryInfo">
        <span class="tag1"></span>
        <span class="tag2"></span>
        <span class="date"></span>
        <span class="time"></span>
      </div>
      <div class="borderBottom"></div>
    </div>
    <div class="pagination"></div>
  </body>
</html>

第1页应显示帖子1和2，第2页应显示帖子3。

Answer 1

好的，我找到了答案，当然，这是一个愚蠢的错误。我有这个小片段：$(postsToDisplay[i]).show();

我不确定为什么我只能显示整个数组时为什么要显示每个'i'...所以解决方法是$(postsToDisplay).show();

分页将显示第一页，但不会显示第二页或第三页

1 个答案: