前後のページへのリンクを自動的に付加したい!

今回は、sample_1.html, sample_2.htmlというように、連続する数値がそのままページの
流れを示している場合に、次のページや前のページへのリンクをjQueryで簡単に自動不可する
サンプルを紹介します。

このサンプルは、同じページにあるファイルで、「xxxxx_y.html」(“y”が通し番号)という
フォーマット限定のサンプルになりますが、replaceの正規表現を修正すれば融通はきくと
思います。

サンプルのソースは以下になります。








$(function(){
    var cur_num     = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$2");
    var next_num    = parseInt(cur_num) + 1;
    var prev_num    = parseInt(cur_num) - 1;
    var next = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$1" + next_num + "$3");
    var prev = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$1" + prev_num + "$3");
    $('#next').attr('href', next);
    $('#prev').attr('href', prev);
});







現在のページ番号取得

var cur_num     = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$2");

location.hrefは自身のURLになります。このURLからページの通し番号を抽出してcur_numに代入します。
たとえば、http://example.com/sample_3.html というURLの場合、”3″が抽出されます。
ただし、この”3″は文字であるためそのままでは数値としては扱えません。

次のページと、前のページのページ番号の計算

var next_num    = parseInt(cur_num) + 1;
var prev_num    = parseInt(cur_num) - 1;

そこで、URLから得たページ番号のcur_numを数値に直してから計算するために、
parseInt()メソッドを使用します。
次のページは番号が増えるため+1し、前のページは-1します。

次のページ/前のページのURLを作成

var next = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$1" + next_num + "$3");
var prev = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$1" + prev_num + "$3");

抽出の時と同じく、location.hrefにreplace()メソッドを適用して、先ほど計算したページ番号を
元に次のページと前のページのURLを作成します。

作成したURLをそれぞれaタグのhrefに設定する

$('#next').attr('href', next);
$('#prev').attr('href', prev);

最後に、作成した次のページ及び前のページのURLを該当のaタグのhrefにそれぞれ設定します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>