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

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

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

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)