jQuery分页与第一个最后一个，prev和下一个按钮

Question

嗨我有以下代码为jquery分页（第一，最后，previus，下一步），并尝试我可能我不能让它工作任何想法如何使这行得通 ？

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>