incboxfilter_select.js
概要
読み込んだ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; }