どもです。
お腹が空いた餅。です。
意外と使いどころのありそうなjsを開発したのでソース晒しときます。
今回の案件は、
「データ一覧を表示するページで、カテゴリのボタンを押すことでデータの表示・非表示を切り替えたい。また、新着記事も同様に処理したい。」
……わかりにくい！！
図解するとこんな感じ。
10/1追記 改良版うｐしました！
ソースはこんな感じ。
// JavaScript Document
$(function(){
var list_new_how = 8 ; // list_new選択時の表示数
$(window).bind('load', function() {
var objectList = new Object();
$("カテゴリボタン").each(function() {
var className = $(this).attr('class');
objectList[className] = "0";
});
$('データ').css('display','none');
for( var i = 0 ; i <= list_new_how ; i++ ){
$('カテゴリボタン:nth-of-type('+ i +')' ).css('display','table');
}
$('カテゴリボタン.list_new').css({"background":"#ffab1d","color":"#fff"});
objectList.list_new = "1";
$("カテゴリボタン").click(function () {
var clickClass = $(this).attr('class');
if( objectList[clickClass] == 0 ){
objectList[clickClass] = "1";
}else{
objectList[clickClass] = "0";
}
$('データ').css('display','none');
$('カテゴリボタン').css({"background":"none","color":"#666464"})
$.each(objectList, function(objectName, value) {
if( objectName == "list_new" ){
if( value == "1" ){
for( var i = 0 ; i <= list_new_how ; i++ ){
$('.list_area ul li:nth-of-type('+ i +')' ).css('display','table');
}
$('カテゴリボタン.'+ objectName).css({"background":"#ffab1d","color":"#fff"})
}
}else{
if( value == "1" ){
$('データ.'+ objectName ).css('display','table');
$('カテゴリボタン.'+ objectName).css({"background":"#ffab1d","color":"#fff"})
}
}
});
})
});
});
CSSのところは、カテゴリボタンの選択時・非選択時のスタイル切り替えです。
新着記事のカテゴリボタンには必ずクラス名「list_new」をつけてください。
カテゴリボタンとカテゴリに属するデータは同じクラス名をつけることでセット化します。
その際、クラスが複数あると誤作動しますので、
必ず、そのカテゴリを示す1つだけクラス名として設定してください。