incboxfilter_select.js

2017-02-08 12:00
WEB

概要

読み込んだincファイルの要素を絞込表示するjQuery – incboxfilter.jsをプルダウンセレクターにしたバージョン。

スタイルもシンプルにした。

成果物

http://hi3103.net/study/incboxfilter_select/

HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="js/incboxfilter_select.js" charset="UTF-8"></script>
	<title>incboxfilter_select.js</title>
</head>
<body>

	<select name="filter">
		<option value="all" selected="selected">Show All</option>
		<option value="green">Show Green Boxes</option>
		<option value="blue">Show Blue Boxes</option>
		<option value="red">Show Red Boxes</option>
		<option value="hoge">Show Hoge Boxes</option>
	</select>

	<div class="boxes"></div>
</body>
</html>
incboxfilter_select.js
$(function(){
	$('.boxes').load('inc/box.inc', null, function() {
		var $filters = $('select[name=filter]');
		var $boxes = $('.boxes a');

		$filters.change(function () {
			$('select option:selected').each(function () {
				var $filterColor = $(this).attr('value');

				if ($filterColor == 'all') {
					$boxes.fadeOut().promise().done(function() {
						$boxes.fadeIn();
					});
				} else {
					$boxes.fadeOut().promise().done(function() {
						$boxes.filter('.'+$filterColor).fadeIn();
					});
				}
			});
		});
	});
});
box.inc
<a class="red" href="#">Box1</a>
<a class="green" href="#">Box2</a>
<a class="blue hoge" href="#">Box3</a>
<a class="green" href="#">Box4</a>
<a class="red" href="#">Box5</a>
<a class="green" href="#">Box6</a>
<a class="blue" href="#">Box7</a>
<a class="red hoge" href="#">Box8</a>
<a class="green" href="#">Box9</a>
<a class="blue" href="#">Box10</a>
<a class="red" href="#">Box11</a>
<a class="green hoge" href="#">Box12</a>
<a class="blue hoge" href="#">Box13</a>
<a class="green" href="#">Box14</a>
<a class="red" href="#">Box15</a>
<a class="blue" href="#">Box16</a>
style.css
@charset "UTF-8";

a {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	margin-bottom: 1em;
	margin-right: 1em;
}

.boxes a {
	width: 10em;
	color:#FFF;
}

.green{
	background: lightgreen;
}
.blue{
	background: lightblue;
}
.red{
	background: lightcoral;
}
.hoge{
	border: 2px solid #000;
}

参考URL