ど素人から毛を生やす。<延>

ページ送りを簡単に実現するjQuery

Web > javascript 2014年8月8日(最終更新:2年前)

このページは2014.8.8に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
キングダムハーツ3DS版を購入した餅。です。

まだプレイ時間1時間弱ですが、早速登場したすばせか民たちにホクホク(゚∀゚)
ファンタジー出身の方々とリアル若者との会話ズレが見てて面白いですw

「守ってね、騎士(ナイト)さん?」
「!? ……俺はそんなんじゃない」
「えっ。素で返さないでよ……」

の流れが妙にツボりましたw
そしてヨシュアの隠す気すらない黒幕臭wwある意味ネタバレww

久しぶりにJavaScript。

本日の課題は、「ECCUBEの商品レビューでページ送りしたい」でした。

jsを使ってやって欲しいとのことでしたが、探して見つけたjsでのページ送りは
コンテンツを一定数ごとにdivで区切る必要があるものでした。

餅。ECCUBEの出力を制御する方法なんてわかりません。

ので、自前でjsを作ってしまうことにしました。
ソースがこちら。

$(function(){

	var how   =  5 ;	// 1ページあたりの表示数
    var total =  $('ページ送りしたいコンテンツ').length;	// コンテンツの総数

	var page = Math.ceil(total / how);
	var amari = total % how ;

	if( page > 1){
	$("ページ送りを表示させたい要素").append('<div class="jspagerButton"></div>');
	for (var i=1 ; i <= page ; i++){
	$("ページ送りを表示させたい要素 div.jspagerButton").append('<span>'+ i +'</span>');
	}
	}

	$('ページ送りしたいコンテンツ').css('display','none');

	for (var i=1 ; i <= how ; i++){
	$('ページ送りしたいコンテンツ:nth-of-type('+ i +')').css('display','block');
	}
	$('ページ送りを表示させたい要素 div.jspagerButton span:nth-of-type(1)').addClass('nowClass')

$('ページ送りを表示させたい要素 div.jspagerButton span').click(function () {
	var clickButton = $("ページ送りを表示させたい要素 div.jspagerButton span").index(this) +1;

	if( clickButton == 1 ){
		clickButton2 = 1
		}else{
		clickButton2 =  how * ( clickButton - 1 ) + 1
		}
	$('ページ送りしたいコンテンツ').css('display','none');
	$('ページ送りを表示させたい要素 div.jspagerButton span').removeClass('nowClass')
	$('ページ送りを表示させたい要素 div.jspagerButton span:nth-of-type('+ clickButton +')').addClass('nowClass')

	for (var i= clickButton2 ; i <= clickButton2 + how - 1 ; i++){
	$('ページ送りしたいコンテンツ:nth-of-type('+ i +')').css('display','block');
	}
});

});

ページ送りしたいコンテンツは当初、設定した数以降のものはdisplay:noneです。

コンテンツが規定数を超える場合、
div.jspagerButtonを生成し、その中にspanを設置します。

spanを押すことでコンテンツのdisplayが切り替わります。
選択中のページを示すspanには.nowclassがつくので、CSSの管理もし易いと思います。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)