どもです。
キングダムハーツ3DS版を購入した餅。です。
まだプレイ時間1時間弱ですが、早速登場したすばせか民たちにホクホク(ﾟ∀ﾟ)
ファンタジー出身の方々とリアル若者との会話ズレが見てて面白いですｗ
「守ってね、騎士（ナイト）さん？」
「！？ ……俺はそんなんじゃない」
「えっ。素で返さないでよ……」
の流れが妙にツボりましたｗ
そしてヨシュアの隠す気すらない黒幕臭ｗｗある意味ネタバレｗｗ
久しぶりに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の管理もし易いと思います。