jQuery分页与第一个最后，上一个和下一个按钮答案

【问题标题】：jQuery pagination with first last, prev and next buttonsjQuery分页与第一个最后，上一个和下一个按钮
【发布时间】：2017-08-30 06:09:22
【问题描述】：

您好，我有以下用于 jquery 分页的代码（第一个、最后一个、上一个、下一个）并尝试我可能无法让它工作任何想法如何让它工作？

This is my code

jQuery:

$(document).ready(function() {
  switch_page(n);
});  

function switch_page(n){
        var which_page = 0;
    which_page = Math.abs((which_page + n) % 4);
    $("div").not("eq("+which_page+")").each(function(){ $(this).hide(); });
    $("div:eq("+which_page+")").show();
}

$(document).ready(function() {
    $("#next").click(function(){ switch_page( 1); });
    $("#prev").click(function(){ switch_page(-1); });
    $("#pag1").click(function(){ which_page = 0; switch_page(0); });
    $("#pag2").click(function(){ which_page = 1; switch_page(0); });
    $("#pag3").click(function(){ which_page = 2; switch_page(0); });
    $("#pag4").click(function(){ which_page = 3; switch_page(0); });
    $("#frst").click(function(){ which_page = 0; switch_page(0); });
    $("#last").click(function(){ which_page = 3; switch_page(0); });
});

【问题讨论】：

如果您可以编辑您的问题以说明您的代码发生了什么以及您期望发生什么，这将有所帮助。寻求帮助以“让它发挥作用”太含糊了

标签： jquery pagination

【解决方案1】：

几个问题：

当您最初调用switch_page(n) 时，没有定义n。您的 JavaScript console 应该报告了这一点。将它的声明移到所有函数都可以看到的地方。
既然我们必须在某处开始，请致电switch_page(0) 开始。
"eq(...)" 应该是 ":eq(...)"
无需调用.each()单独隐藏元素； .hide() 会很乐意一次将整套藏起来。

var which_page = 0;

$(document).ready(function() {
  switch_page(0);
});

function switch_page(n) {
  which_page = Math.abs((which_page + n) % 4);
  $("div").not(":eq(" + which_page + ")").hide();
  $("div:eq(" + which_page + ")").show();
}

$(document).ready(function() {
  $("#next").click(function() {
    switch_page(1);
  });
  $("#prev").click(function() {
    switch_page(-1);
  });
  $("#pag1").click(function() {
    which_page = 0;
    switch_page(0);
  });
  $("#pag2").click(function() {
    which_page = 1;
    switch_page(0);
  });
  $("#pag3").click(function() {
    which_page = 2;
    switch_page(0);
  });
  $("#pag4").click(function() {
    which_page = 3;
    switch_page(0);
  });
  $("#frst").click(function() {
    which_page = 0;
    switch_page(0);
  });
  $("#last").click(function() {
    which_page = 3;
    switch_page(0);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>page 1</div>
<div>page 2</div>
<div>page 3</div>
<div>page 4</div>

<button id=frst>(first)</button>
<button id=prev>(prev)</button>

<button id=pag1>(1)</button>
<button id=pag2>(2)</button>
<button id=pag3>(3)</button>
<button id=pag4>(4)</button>
<button id=next>(next)</button>


<button id=last>(last)</button>

【讨论】：