jQueryのページネーション

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

いくつかの問題は：あなたが最初にswitch_page(n)を呼び出すと

1. は、定義された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>