jQueryで要素の絞り込み選択

複数ある要素をタグ（class、id等）ごとに表示・非表示するサンプルです。単純な要素の表示・非表示やソート等のサンプルはよくあるのですが、今回のパターンはあまり見ないので重宝するサンプルかと思います。

<div id="tags">
<span class="select">全て</span>
<span id="dogs">イヌ</span>
<span id="cats">ネコ</span>
<span id="birds">トリ</span>
←クリックで要素の絞り込み
</div>

<div id="animal">
<div class="cat"><img src="images/cat1.jpg"></div>
<div class="dog"><img src="images/dog1.jpg"></div>
<div class="dog"><img src="images/dog2.jpg"></div>
<div class="bird"><img src="images/bird1.jpg"></div>
<div class="bird"><img src="images/bird2.jpg"></div>
<div class="dog"><img src="images/dog3.jpg"></div>
<div class="cat"><img src="images/cat2.jpg"></div>
<div class="bird"><img src="images/bird3.jpg"></div>
<div class="cat"><img src="images/cat3.jpg"></div>
<div class="cat"><img src="images/cat4.jpg"></div>
<div class="bird"><img src="images/bird4.jpg"></div>
<div class="dog"><img src="images/dog4.jpg"></div>
</div>

$(function() {
	$("#tags span").click(function() {
		var tags = $(this).attr('id');
		$("#tags span").removeClass('select');
		$(this).addClass('select');
		$("#animal div").hide();
		if(tags == 'dogs') {
			$("#animal .dog").show();
		} else if(tags == 'cats') {
			$("#animal .cat").show();
		} else if(tags == 'birds') {
			$("#animal .bird").show();
		} else {
			$("#animal div").show();
		}
	});
});

解説

まず、サンプルで動作の確認をとって頂ければと思います。
動作としては犬、猫、鳥の写真をボタンクリックで絞り込むというものです。
それぞれの動物の写真には判別する為のclass名「dog」、「cat」、「bird」を設定してあります。

<div class="dog"><img src="images/dog1.jpg"></div>
<div class="cat"><img src="images/cat1.jpg"></div>
<div class="bird"><img src="images/bird1.jpg"></div>

各写真は「イヌ」、「ネコ」、「トリ」と書かれたボタンをクリックすることで、絞り込まれます。

<span id="dogs">イヌ</span>
<span id="cats">ネコ</span>
<span id="birds">トリ</span>

実際のjavascriptの動作としては、ID名「tags」で囲われた要素「span」（「イヌ」、「ネコ」、「トリ」と書かれたボタンのいずれか）をクリックしたら、変数「tags」にクリックされた要素「span」のID名を格納します。

	$("#tags span").click(function() {
		var tags = $(this).attr('id');

同時にID名「tags」で囲われた要素「span」に設定されている全てのclass「select」をremoveClassで一旦削除します。
削除した後に実際クリックされた要素「span」に対してaddClassでclass「select」を設定します。
class「select」に関してはどのボタンがクリックされているかを分かりやすくする為に、ボタンの背景色を黒くするだけのものなので今回の主旨にはあまり関係ありません。
そしてID名「animal」で囲われたdiv要素を全て非表示にします。このdiv要素を非表示にする＝写真は全て非表示になります。

		$("#tags span").removeClass('select');
		$(this).addClass('select');
		$("#animal div").hide();

最後にif文を使って変数「tags」に格納さえた値ごとの処理を行います。
「tads」の値が「dogs」だった場合、つまりボタン「イヌ」がクリックされた場合は、class「dog」が設定されたdiv要素をshow()で表示し、値が「cats」の場合はclass「cat」、「birds」の場合はclass「bird」のdiv要素をそれぞれ表示します。
esle・・・それ以外の場合は全てのdiv要素を表示（全ての画像を表示する）します。今回で言うとボタン「全て」をクリックした場合が該当します。

		if(tags == 'dogs') {
			$("#animal .dog").show();
		} else if(tags == 'cats') {
			$("#animal .cat").show();
		} else if(tags == 'birds') {
			$("#animal .bird").show();
		} else {
			$("#animal div").show();
		}