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>