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

jQuery

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

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

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

現在のページ番号取得

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

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

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

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

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

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

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

/

タイトルとURLをコピーしました