Question

我是JavaScript的新手，我正在构建一些脚本来提高我的技能。

我试图在纯JavaScript中构建分页脚本，脚本正在运行，但我希望在用户达到分页限制时阻止前向链接。我已经尝试创建一个条件来防止这种情况，但是无法正常工作。

我的代码：

var col = document.getElementsByClassName('square');

    //Limit of squares to be shown

    var begin = 0;
    var end = 3;

    //Show the first three squares

    changePage("forward", 0, 0);
    changePage("back", 0, 0);

    function removeCols() {
      for (var i = 0; i < col.length; i++) {
        col[i].style = "display:none";
      }
    }

    //Forward and previous links

    document.getElementsByClassName('forward')[0].onclick = function() {
      changePage("forward", (col.length - 3), col.length);
    };
    document.getElementsByClassName('previous')[0].onclick = function() {
      changePage("previous", 0, 3);
    };

    //Function to change the pagination page

    function changePage(move, valueBegin, valueEnd) {

      //This if statement checks if the user reached the pagination limit

      if (document.getElementById('page').value == "" + valueBegin + valueEnd) {
        return false;
      } else {
        removeCols();
        if (move == "forward") {
          var forwardBegin = begin += 3;
          var forwardEnd = end += 3;
          moveIt(forwardBegin, forwardEnd);
          document.getElementById('page').value = "" + forwardBegin + forwardEnd;
        } else {
          var previousBegin = begin -= 3;
          var previousEnd = end -= 3;
          moveIt(previousBegin, previousEnd);
          document.getElementById('page').value = "" + previousBegin + previousEnd;
        }
      }
    }

    //Change page

    function moveIt(begin, end) {
      for (var i = begin; i < end; ++i) {
        var item = col[i];
        if (item) {
          item.style = "display:inline-block";
        }
      }
    }

的jsfiddle：

https://jsfiddle.net/eyqv5j9w/2/

Answer 1

在实际更改页面之前，您需要添加一个计数器并检查页面的长度。类似的东西：

if (counter < page_limit) {
   counter ++;
   changePage("forward", (col.length - 3), col.length);
}

整个东西都在这个JSFiddle上： https://jsfiddle.net/eyqv5j9w/5/

Answer 2

这里存在许多问题，首先是您存储当前页面的方式。有没有理由将它保存在隐藏的html输入中而不是js中的变量？

其次，当您使用：

将其分配给隐藏元素的值时

document.getElementById('page').value = "" + forwardBegin + forwardEnd;

在第三页上最终会出现类似的内容：

<input type="hidden" value="912" id="page">

然而，即使我们通过摆脱"" +

来解决这个问题

document.getElementById('page').value = forwardBegin + forwardEnd;

将页面计算更改为字符串连接，最终页面值从3到9变为15.您的页面应该增加1而不是6。

重做你的计算。确保页面增加1.然后使用page_number * items_to_show计算要显示的项目。即，第3页显示了第6-9项。

Answer 3

@Serg是正确的，因为你存储当前页面的方式导致分页不正确。

我分享了你的例子并非常简化了一些事情。当你在第一页/最后一页时，我让它隐藏了前一个/前进链接。我还将每页显示的方块数放入它自己的变量中，因此很容易修改。

https://jsfiddle.net/2nzvyLvw/3/

以下是我更改的主要部分：

  var col = document.getElementsByClassName('square');
  var forward = document.getElementsByClassName('forward')[0];
  var previous = document.getElementsByClassName('previous')[0];
  var page = 0;
  var squaresPerPage = 3;

  //Show the first page
  changePage(0, squaresPerPage);

  forward.onclick = function() {
    page++;
    var startingSquare = page * squaresPerPage;
    changePage(startingSquare, startingSquare + squaresPerPage);
  };
  previous.onclick = function() {
    page--;
    var startingSquare = page * squaresPerPage;
    changePage(startingSquare, startingSquare + squaresPerPage);
  };

  function changePage(valueBegin, valueEnd) {
    removeCols();
    moveIt(valueBegin, valueEnd);

    // hide forward link if on last page
    if (valueEnd >= col.length) {
      forward.style = "display: none";
    } else {
      forward.style = "display: inline";
    }
    // hide previous link if on first page
    if (valueBegin <= 0) {
      previous.style = "display: none";
    } else {
      previous.style = "display: inline";
    }
  }

添加分页限制

3 个答案: