【javascript】要素を絞り込み表示したい【css】

公開日:2021年11月12日

Categoryweb制作

Contents

1 要素を絞り込んで表示したい
2 javascriptを使って表示を切り分ける

要素を絞り込んで表示したい

例えばレクサスのwebサイトは、車両タイプ別に表示を絞り込んでいる。
https://lexus.jp/models/

こんな感じで、リスト表示をクリックで絞り込みたい。そんな時の備忘録。

javascriptを使って表示を切り分ける

こちらのサイトが参考になった。

jQueryでリスト表示を絞り込む処理を実装する｜ Tips Note by TAM
https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html

html側にはそれぞれの要素にdata-groupでグループ分けをする。
そして、css側で表示・非表示のクラス名とdisplayでnoneとそうでないものを振り分ける。

で、javascriptで下記のように記述。

var searchItem = '.search_item';   // 絞り込む項目を選択するエリア
var listItem = '.list_item';       // 絞り込み対象のアイテム
var hideClass = 'is-hide';         // 絞り込み対象外の場合に付与されるclass名
var activeClass = 'is-active';     // 選択中のグループに付与されるclass名

$(function() {
	// 絞り込みを変更した時
	$(searchItem).on('click', function() {
		$(searchItem).removeClass(activeClass);
		var group = $(this).addClass(activeClass).data('group');
		search_filter(group);
	});
});

/**
 * リストの絞り込みを行う
 * @param {String} group data属性の値
 */
function search_filter(group) {
	// 非表示状態を解除
	$(listItem).removeClass(hideClass);
	// 値が空の場合はすべて表示
	if(group === '') {
		return;
	}
	// リスト内の各アイテムをチェック
	for (var i = 0; i < $(listItem).length; i++) {
		// アイテムに設定している項目を取得
		var itemData = $(listItem).eq(i).data('group');
		// 絞り込み対象かどうかを調べる
		if(itemData !== group) {
			$(listItem).eq(i).addClass(hideClass);
		}
	}
}

これでlexusの車両モデルページ風な動きが可能になった。