Question

假设我有三个html页面：第1页，第2页和第3页。当我单击第1页上的NEXT时，它转到第2页，当我点击第2页上的下一页时，它转到第3页，当我点击下一页时在第3页上，它转到第1页。反之亦然，当我在第3页上单击PREVIOUS时，它会转到2; 2，它变为1;现在说我要添加第4页。而不是必须进入HTML页面并更改第3页上的链接NEXT转到第4页上的第4页和上一页，转到第4页，是有一些脚本（Javascript）我可以编写，所以当你点击下一步时，它会自动查看页码和增量，或者转到第1页，反之亦然，点击上一页？任何帮助将不胜感激！

Answer 1

递增最小值应为1且最大值应为X的数字的通用公式为：

n = (n % X) + 1;

递减该数字的通用公式为：

n = ((n + X + 1) % X) + 1;

因此，如果n是当前页码，X是3（三页）...

示例：Live Copy

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <input type="button" id="btnPrev" value="Previous">
  <input type="button" id="btnNext" value="Next">
<script>
  (function() {
    "use strict";

    var page = 1;
    var pageCount = 3;

    display("Starting page: " + page);
    document.getElementById("btnPrev").onclick = function() {
      page = ((page + pageCount + 1) % pageCount) + 1;
      display("previous, page now " + page);
    };
    document.getElementById("btnNext").onclick = function() {
      page = (page % pageCount) + 1;
      display("next, page now " + page);
    };

    function display(msg) {
      var p = document.createElement('p');
      p.innerHTML = String(msg);
      document.body.appendChild(p);
    }
  })();
</script>
</body>
</html>

Answer 2

你可以更好地使用页面名称数组 - 假设页面数量有限。

喜欢： -

var pageArray = ["page1.html", "page2.html","page3.html"];
function next(){
    var hr = window.location.href.splitOnLast("/");
    var page=hr[1].replace("/","");
    var nxtIndex =  pageArray.indexOf(page) + 1 ;
    if(nxtIndex > pageArray.length) nxtIndex=0;
    var redirect = hr[0]+"/"+pageArray[nxtIndex];
    window.location.href=redirect;
}
function prev(){
    var hr = window.location.href.splitOnLast("/");
    var page=hr[1].replace("/","");
    var nxtIndex =  pageArray.indexOf(page) - 1 ;
    if(nxtIndex < 0) nxtIndex=pageArray.length-1;
    var redirect = hr[0]+"/"+pageArray[nxtIndex];
    window.location.href=redirect;
}

通过使用此方法，您无需使用严格的编号，并且可以在列表中的任何位置随意添加新页面。

此方法的另一个优点是您可以进一步开发它并在不同项目中的任何位置使用，包括完全由数据库驱动的菜单，站点和导航系统。

这种方法的唯一缺点是，它可以将当前导航中的所有页面名称一次性地发送给任何知道JavaScript的人，尽管我们从不打算从我们的最终用户那里隐藏我们的页面名称。

修改我忘了在重定向代码中添加“/”。

Javascript：转到上一页/下一页

2 个答案: