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

カテゴリや新着を選択してデータ表示を切り替えるjQuery

Web > javascript 2014年9月5日(最終更新:3年前)

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

どもです。
お腹が空いた餅。です。

意外と使いどころのありそうなjsを開発したのでソース晒しときます。

今回の案件は、
「データ一覧を表示するページで、カテゴリのボタンを押すことでデータの表示・非表示を切り替えたい。また、新着記事も同様に処理したい。」

……わかりにくい!!

図解するとこんな感じ。
h260905

 

 

ソースはこんな感じ。

// 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つだけクラス名として設定してください。

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