
ページの前後リンクをjQueryで動的に生成する
2015年1月16日jQueryのみでつくるギミック
同じ階層に同じ種類のページが沢山ある場合、それらのページに前後のリンクを設置することがありますが、これらのページに対して1ページ1ページhtml上でリンク先を書いていると、間にページを一枚追加した時などは、新しいページを用意した上でその前後のページに対してもリンク先を修正する必要があります。
この修正の手間を減らすための方法として、ページの前後関係を含むページの情報をJavaScript上に記述しておき前後のリンクを動的に生成します。これにより間にページを1枚追加した時に発生する、各htmlを修正する必要がなくなります。
JavaScript
(function($){ $(function() { var page = ['index.html', 'page02.html', 'page03.html', 'page04.html']; var pageName = ['page01', 'page02', 'page03', 'page04']; $('#contents').after( '<div id="pagination"><ul></ul></div>'+ '<div id="prevNextNav"><ul><li class="prev"><a href="#">prev</a></li><li class="next"><a href="#">next</a></li></ul></div>' ); var arrayNum = page.length-1; var pageNum = window.location.href.split('/').length; var pageLink = window.location.href.split('/')[pageNum-1]; var currentPage = $.inArray(pageLink, page); if(currentPage == 0) { var next = currentPage+1; var prev = arrayNum; } else if(currentPage == arrayNum) { var next = 0; var prev = currentPage-1; } else { var next = currentPage+1; var prev = currentPage-1; } $('#prevNextNav .prev a').attr('href', page[prev]); $('#prevNextNav .next a').attr('href', page[next]); for(i=0;i<=arrayNum;i++){ $('#pagination ul').append('<li><a href="'+page[i]+'">'+pageName[i]+'</a></li>'); } $('#pagination a[href$="'+pageLink+'"]').addClass('current'); }); })(jQuery);