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

複数のカテゴリから残り1つのカテゴリを絞り込み、選ばれたカテゴリからページを取得する

Web > javascript 2016年4月20日(最終更新:1年前)

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

どもです。

今回のお題はこんな感じ。

カテゴリ①②の両方を持つpostのカテゴリ③だけが表示される→選択されたカテゴリ名.htmlを取得して表示!

…この図でわかるのだろうかw
説明しますと、

複数の種類のカテゴリと(カテゴリ①~③)、
複数のカテゴリを持つ記事(post)を用意

カテゴリ①や②を選択すると、そのカテゴリを含むpostを探し、
そのpostが所持している特定のカテゴリ(カテゴリ③)を取得する

取得したカテゴリ③だけを表示し、取得できなかったものは非表示にする

更に、選択されたカテゴリ名を繋げてURLを作り、ページを取得する

といった仕様と手順です。
URLの取得、ページ取得の処理を変更すれば、様々なものに応用できると思います。

記事一覧、カテゴリの出力

<script>
// 記事一覧
var arr = {
	AAAaaa111: {key_A: 'AAA', key_B: 'aaa', key_C: '111'},
	AAAbbb111: {key_A: 'AAA', key_B: 'bbb', key_C: '111'},
	AAAaaa222: {key_A: 'AAA', key_B: 'aaa', key_C: '222'},
	AAAbbb222: {key_A: 'AAA', key_B: 'bbb', key_C: '222'},
	BBBaaa111: {key_A: 'BBB', key_B: 'aaa', key_C: '111'},
	BBBaaa222: {key_A: 'BBB', key_B: 'aaa', key_C: '222'},
	BBBbbb111: {key_A: 'BBB', key_B: 'bbb', key_C: '111'},
	CCCaaa111: {key_A: 'CCC', key_B: 'aaa', key_C: '111'},
	CCCaaa222: {key_A: 'CCC', key_B: 'aaa', key_C: '222'},
	CCCaaa333: {key_A: 'CCC', key_B: 'aaa', key_C: '333'},
};

// カテゴリー
var category = {
	key_A: {'AAA':'cate_AAA', 'BBB':'cate_BBB', 'CCC':'cate_CCC', 'DDD':'cate_DDD'},
	key_B: {'aaa':'cate_aaa', 'bbb':'cate_bbb', 'ccc':'cate_ccc'},
	key_C: {'111':'cate_111', '222':'cate_222', '333':'cate_333'},
}


var present_value = new Array();	// 選択されているvalue配列
for(var key in category){			// category as key
	present_value[ key ] = '';		// [key_A: "", key_B: "", key_C: ""]
}

var target = 'key_C';				// 絞りこみ対象≪任意変更箇所≫

var display_position = '#post';			// 取得したページを表示する要素≪任意変更箇所≫
</script>

AAAaaa111等がpostのURL(AAAaaa111.html)、
key_A等がカテゴリの種類で、cate_AAAはカテゴリの日本語名などの別名です。

プログラム本体(別ファイルに保存推奨)

$(window).load(function(){
	
	$('.roading').hide();
	$('#flyer_menu').show()
	
	$('#size .box label:first-child input').prop("checked",true);
	$('#texture .box label:first-child input').prop("checked",true);

	function radiocheck(radioNow){
		$(radioNow).siblings("label").removeClass('current');
		$(radioNow).addClass('current');
	}

	function main(){
		var for_work_array = $.extend(true, [], arr);				// arrを作業用配列にコピー
		for(var key in category){									// category as key (key_A)
			for(var post_name in arr){								// arr as post (AAAaaa111)
				var post = arr[post_name];
				if( 
					post[key] != present_value[key]	
					&&
					present_value[key] != ''
					&&
					key != target
				){
					delete for_work_array[post_name];				// 作業用配列[post]を削除
				}
			}
		}
		var residual_array = new Array();							// 表示するtargetの値の配列
		for(var residual_name in for_work_array){					// 作業用配列 as residual
			var residual = for_work_array[residual_name];
			residual_array.push(residual[target]);					// 表示するtargetの値の配列にresidualを追加
		}
		residual_array = jQuery.unique(residual_array);				// 表示するtargetの値の配列の重複を削除
		$('#'+target+' label').hide();
		for (var i = 0; i < residual_array.length; i ++){
			$('#'+target+' input[value="'+residual_array[i]+'"]').parents('label').show();
		}
		var url = '';												// 取得するURL
		for(var key in category){									// category as key
			url = url + present_value[ key ];						// 選択されているvalueをカテゴリの順に繋げる
		}
		$.ajax({													// ajax
               type: 'GET',
               url: url+'.html',									// 選択されているvalueをカテゴリの順に繋げたもの.html
               dataType: 'html',
               success: function(data) {							// 取得成功時の処理
                    $(display_position).html(data);					// 表示する要素の内容を取得したものに置き換え
               },
               error:function() {									
               }
		});	
	}

	$('input[type="radio"]').change( function(){					// 変更されたradio
		present_value[ $(this).attr('name') ] = $(this).val();	// 選択されたvalueをpresent_value[name]に代入
		radioNow = $(this).parent("label");						// 選択されたinputの親labelを取得
		main();
		radiocheck(radioNow);
	});
	
	$('input[type="radio"]').filter(":checked").map( function() {	// ページ読み込み時、選ばれているradio
		present_value[ $(this).attr('name') ] = $(this).val();	// 選択されているvalueをpresent_value[name]に代入
	    radioNow = $(this).parent("label");						// 選択されているinputの親labelを取得
		main();
		radiocheck(radioNow);
	});
	
});

ページ読み込み時に各カテゴリ先頭のradioが自動でチェック状態になります。
また、チェックされているradioの親labelに.currentがつくようになっています。

radioをselectに変更する、
residual_array.length>0(表示するtargetの値の配列の有無)でifを書いて表示制御する、
URL取得のajaxを変更するなど、カスタマイズできる要素は多くあると思います。

ご参考までに。

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