javascriptとcssで作るカテゴリーソート機能

カテゴリーソート機能を、javascriptとcssを使い、jQueryなしで作りました。
まずはデモをご覧ください。

1. 概要
2. html
3. css
4. javascript

概要

選択されたカテゴリーのものだけがのこり、それ以外は縮小・透過表示されクリックできなくなるというものです。
カテゴリーを選択するボタンとコンテンツとなる要素を、同じクラスを指定するだけで反応するように作っています。

html

<dl id="btns">
    <dt>カテゴリー：</dt>
    <dd class="red">赤</dd>
    <dd class="green">緑</dd>
    <dd class="yellow">黄</dd>
    <dd class="purple">紫</dd>
    <dd class="orange">橙</dd>
    <dd class="blue">青</dd>
    <dd class="rect">四角</dd>
    <dd class="round">丸</dd>
</dl>
<ul id="contents">
    <li class="red round"><a href="#"></a></li>
    <li class="orange rect"><a href="#"></a></li>
    <li class="yellow round"><a href="#"></a></li>
    <li class="green round"><a href="#"></a></li>
    <li class="purple rect"><a href="#"></a></li>
    <li class="blue round"><a href="#"></a></li>
    <li class="orange round"><a href="#"></a></li>
    <li class="green rect"><a href="#"></a></li>
    <li class="red round"><a href="#"></a></li>
    <li class="blue rect"><a href="#"></a></li>
    <li class="orange round"><a href="#"></a></li>
    <li class="purple round"><a href="#"></a></li>
    <li class="blue round"><a href="#"></a></li>
    <li class="green round"><a href="#"></a></li>
    <li class="yellow rect"><a href="#"></a></li>
    <li class="orange round"><a href="#"></a></li>
    <li class="blue round"><a href="#"></a></li>
    <li class="red round"><a href="#"></a></li>
    <li class="green rect"><a href="#"></a></li>
</ul>

カテゴリ選択のボタンを<dl id=”btn”></dl>で設定。
<dd></dd>が各ボタンです。
それぞれにクラスを指定しておきます。
このクラスを判別して、ソートを行います。

<ul id=”contents”></ul>が、ソートされるコンテンツです。
それぞれの<li></li>にクラスを指定。
このクラスと、ボタンのクラスを照らし合わせ判別します。
クラスを複数指定することもできます。

css

.notActive {
	transform: scale(.5, .5);
	opacity: .2;
	pointer-events: none;
}

この.notActiveクラスで、選択されたカテゴリー以外の要素を、縮小・透過させクリックできないようにするためのスタイルを設定しています。

javascript

// ボタンとなるddを取得
var btns = document.querySelectorAll('#btns dd');

// コンテンツになるliを取得
var contents = document.querySelectorAll('#contents li');

// 変数を宣言：選択された色
var selected;

for (var i = 0; i < btns.length; i++) {
	// ボタンがクリックされたら
	btns[i].addEventListener('click', function () {
		// クリックされたボタンのクラスを取得。選択された色が代入される。
		selected = this.className;
		
		for (var j = 0; j < contents.length; j++) {
			// 一旦notActiveのクラスを削除
			contents[j].classList.remove('notActive');
			// 選択されたボタンの色を除外して
			if (contents[j].classList.contains(selected)) {
				continue;
			}
			// notActiveクラスを付与
			contents[j].classList.add('notActive');
		}
	});
}

<dd></dd>のボタンがクリックされたら、クラスを取得。
そのクラスが付いている要素以外に、.notActiveクラスを付与しています。