javascript - 改进这个 "next","previous"脚本，使其可以上升到至少 3

Question

我正在尝试创建一个包含项目的列，在此列中您可以转到“下一页”或“上一页”页面。

这工作得很好而且很快!

现在我的问题是

如何创建最多 8 页甚至更多页，以便您可以滚动浏览页面？

我正在尝试一些东西，但我无法将它实现为 html

function next() {
  var nextUrl = "Page + (index+1)";
}

function back() {
  var prevUrl = "Page + (index-1)";
}

这是我当前的设置

function show(elementID) {
    var ele = document.getElementById(elementID);
    if (!ele) {
        alert("dit bestaat niet");
        return;
    }
    var pages = document.getElementsByClassName('page');
    for(var i = 0; i < pages.length; i++) {
        pages[i].style.display = 'none';
    }
    ele.style.display = 'block';
}

                	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Page1" class="page" style="">
    page 1
</div>
<div id="Page2" class="page" style="display:none">
    page 2
</div>



<div class="column-wrapper">
  <div class="pagination paginatioon--full">
  <p> 
<span onclick="show('Page1');">
  <a href='#' class="pagination__prev">prev</a>
</span>
<span onclick="show('Page2');">
  <a href='#'class="pagination__next">next</a>          </span> 
  </p>
  </div>
</div>

Answer 1

你可以这样做:

var currentPageId = 1;
var totalpages = $('.page').length;

$('.prev').click(function(e) {
  if (currentPageId > 1) {
    currentPageId--;
    show('Page' + currentPageId);
  }
});
$('.next').click(function(e) {
  if (currentPageId < totalpages) {
    currentPageId++;
    show('Page' + currentPageId);
  }
});



function show(elementID) {
  var ele = document.getElementById(elementID);
  if (!ele) {
    alert("dit bestaat niet");
    return;
  }
  var pages = document.getElementsByClassName('page');
  for (var i = 0; i < pages.length; i++) {
    pages[i].style.display = 'none';
  }
  ele.style.display = 'block';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Page1" class="page" style="">
  page 1
</div>
<div id="Page2" class="page" style="display:none">
  page 2
</div>
<div id="Page3" class="page" style="display:none">
  page 3
</div>

<div class="column-wrapper">
  <div class="pagination paginatioon--full">
    <p>
      <span class='prev'>
  <a href='#' class="pagination__prev">prev</a>
</span>
      <span class='next'>
  <a href='#'class="pagination__next">next</a>          </span> 
    </p>
  </div>
</div>