// JavaScript Document $(function(){ /* ユーザー編集箇所 ******************************************************************************************************/ var list_new_how = 8 ; // list_new選択時の表示数 var page_con_how = 4 ; // 1ページあたりの表示数 var category_li_name = '.demo_categoryList li' // カテゴリーボタンのセレクタ指定 var content_li_name = '.demo_contentsList li'; // コンテンツのセレクタ指定 var pager_li_name = '.demo_contentsList'; // ページャー挿入位置のセレクタ指定 var display_ = 'inline-block' // コンテンツの表示時のdisplay(block,table...) var button_style_on = {"background":"#C7BAB3","color":"#fff"} // カテゴリーボタン選択時のスタイル var button_style_off = {"background":"#fff","color":"#C7BAB3"} // カテゴリーボタン非選択時のスタイル /* ユーザー編集箇所 ******************************************************************************************************/ $(window).bind('load', function() { /* 宣言・準備 ************************************************************************************************************/ // カテゴリ名をオブジェクトとして取得 var objectList = new Object(); $(category_li_name).each(function() { var className = $(this).attr('class'); objectList[className] = "0"; }); // コンテンツをオブジェクトとして取得 var objectItem = $($(content_li_name).get()); // コンテンツのフラグをオブジェクトとして定義(objectItemと同じ数の配列) var objectItems = new Object(); $(content_li_name).each(function(i, elem) { objectItems[i] = "0"; }); // objectItemとobjectItemsを同期するための変数の宣言 var myIndex = 0; // 選択されたカテゴリの数をストックする変数の宣言 var countClicked = 0; // page_con_howの数だけ表示し、残りを非表示 $(content_li_name).css('display','none'); for( var i = 0 ; i <= page_con_how ; i++ ){ $(content_li_name + ':nth-of-type('+ i +')' ).css('display',display_); } var page_now = 1 ; var page_flug = 0; // ページャーを表示 var total = $(content_li_name).length; // コンテンツの総数 var page = Math.ceil(total / page_con_how); if( page > 1){ $(pager_li_name).append('
'); for (var i=1 ; i <= page ; i++){ if(page_now == i){ $(pager_li_name + " div.jspagerButton").append(''+ i +''); }else{ $(pager_li_name + " div.jspagerButton").append(''+ i +''); }} } /* 宣言・準備 ************************************************************************************************************/ /* 関数 ******************************************************************************************************************/ function list(){ // objectItemsの初期化 $(content_li_name).each(function(i, elem) { objectItems[i] = "0"; }); // objectItemsの数値操作 $.each(objectList, function(objectName, value) { // objectListの内容をループ if( objectName == "list_new" ){ // 新着コンテンツについての処理 $.each(objectItem, function(objectItemName, itemObject) { myIndex = $(content_li_name).index(this); if( value == "1" ){ if(myIndex < list_new_how){ objectItems[myIndex]++; } $(category_li_name +'.'+ objectName).css(button_style_on) }else{ $(category_li_name +'.'+ objectName).css(button_style_off) } }); }else{ //カテゴリーコンテンツについての処理 $.each(objectItem, function(objectItemName, itemObject) { myIndex = $(content_li_name).index(this); myIndex2 = $(this).attr('class'); if( value == "1" ){ if( myIndex2.match(objectName)){ objectItems[myIndex]++; } $(category_li_name +'.'+ objectName).css(button_style_on) }else{ $(category_li_name +'.'+ objectName).css(button_style_off) } }); } }); // objectItemsの値に従ってスタイルを変更する $(content_li_name ).css('display','none'); var page_start = ( page_now - 1 ) * page_con_how + 1; var page_end = page_now * page_con_how; var page_no = page_start; var page_con = 0; if(countClicked ==0){ for( var i = page_start-1 ; i <= page_end-1 ; i++ ){ var nth = i+1; $(content_li_name + ':nth-of-type('+ nth +')' ).css('display',display_); objectItems[i]++; } page_con=total; }else{ $(content_li_name).each(function(i, elem) { if(objectItems[i]==countClicked){ if( page_con+1 >= page_start && page_con+1 <= page_end ){ objectItems[i]++; } page_con++; } if(objectItems[i]==countClicked+1){ var nth = i+1; $(content_li_name + ':nth-of-type('+ nth +')' ).css('display',display_); } }); } // ページャーの再表示 console.log('how:'+page_con); var page = Math.ceil(page_con / page_con_how); $(pager_li_name +' div.jspagerButton').html(''); if( page > 1){ for (var i=1 ; i <= page ; i++){ if(page_now == i){ $(pager_li_name + " div.jspagerButton").append(''+ i +''); }else{ $(pager_li_name + " div.jspagerButton").append(''+ i +''); } } } } /* 関数 ******************************************************************************************************************/ /* クリック時の挙動 ******************************************************************************************************/ // ページャークリック時 $(document).on('click', pager_li_name + " div.jspagerButton span", function(){ page_now = $(pager_li_name + " div.jspagerButton span").index(this) +1; page_flug=1; list(); }); // カテゴリクリック時 $(category_li_name).click(function () { var clickClass = $(this).attr('class'); if( objectList[clickClass] == 0 ){ objectList[clickClass] = "1"; countClicked++; }else{ objectList[clickClass] = "0"; countClicked--; } if(page_flug ==1){page_now=1; page_flug=0;} list(); }) /* クリック時の挙動 ******************************************************************************************************/ }); });