改进这个“下一个”，“上一个”脚本，使其可以上升到至少 3

Posted 2023-02-25

【中文标题】改进这个“下一个”，“上一个”脚本，使其可以上升到至少 3

【英文标题】：Improve this "next","previous" script, so that it could go up to atleast 3

【发布时间】：2016-09-17 14:58:43

【问题描述】：

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

这很好用而且很快！

现在我的问题是

如何创建最多第 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>

【参考方案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>

【讨论】：

谢谢您，先生！我的想法完全错了！