jQuery与前一个，上一个和下一个按钮的分页

Question

您好我有以下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); });
});  

Answer 1

一些问题：

1. 当您最初拨打switch_page(n)时，未定义n。您的JavaScript console应该已经报告过了。将它的声明移动到所有功能都可以看到的地方。
2. 由于我们必须启动某处，请致电switch_page(0)开始。
3. "eq(...)"应为":eq(...)"
4. 无需致电.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>