【簡単】JQueryを使ってカテゴリー毎に出し分けれる簡易検索フォームを作る方法
こんにちは。カスミです。
さて以下のようなお悩みをお持ちでしょうか？
商品一覧があるページで、カテゴリー毎に商品を出し分けたい！
PHPに頼らず、JQuery等で出し分けれないの？
このようなお悩みを解決致します。
本記事ではJQueryを使って、カテゴリー毎に出し分けれる簡易検索フォームの作り方について解説致します。
※JQueryを使うので、事前にライブラリをダウンロード・CDNを読み込みましょう。
実装デモ
See the Pen カテゴリークラス分け検索フォーム by Kohei (@kouk05) on CodePen.dark
コードペンを使った実装デモです。
上部にあるカテゴリーボタンを押して頂くと、下部にカテゴリーに紐付いた名前のテキストが出てきます。
詳細については次章より解説致します。
HTML・CSSを準備
<!-- カテゴリーボタン -->
<ul class="category-btn">
<li id="IDcate01">カテゴリー01</li>
<li id="IDcate02">カテゴリー02</li>
<li id="IDcate03">カテゴリー03</li>
</ul>
<!-- 商品一覧 -->
<div id="contents">
<div class="cate01">
カテゴリー商品01-アイテム01
</div>
<div class="cate01">
カテゴリー商品01-アイテム02
</div>
<div class="cate02">
カテゴリー商品02
</div>
<div class="cate03">
カテゴリー商品03
</div>
</div>
まずはhtmlを準備。
カテゴリーボタンを「ulタグ」等を使って、任意で作成。
その中に出し分けたいカテゴリーの数だけ「liタグ」を追加していきます。
追加した各「liタグ」にカテゴリー名に紐付いた任意のID名を付与します。
※ID名の先頭に「ID」をつけましょう。
次に出し分けたい要素をdivで生成していきます。
生成したdivに、先ほどカテゴリーボタンで付けた任意のID名と同じ名前のクラス名を出し分けたい要素に付与します。
CSSを準備
#contents div {display: none;}
CSSを使って、生成した出し分けたいdiv要素は「display: none;」で非表示にしときましょう。
JQueryを使ってカテゴリー毎に出し分ける
$(function(){
$('.category-btn li').each(function(){
$(this).click(function(){
var idname = $(this).attr("id").substring(2).toLowerCase();
var classname = '.';
classname += idname;
$('#contents div:not(classname)').css('display','none');
$(classname).fadeIn(200);
});
});
});
上記コードを用意した任意のセレクタ名に変えて、script内に記述しましょう。
カテゴリーボタンを押した時に、ボタンに付与されてるID名と同じクラス名を持つdiv要素を表示させる処理がされてます。
以上で完成です。
まとめ
カテゴリーを追加する時、ID名とクラス名を任意に変えるだけの簡単な検索フォームなのでぜひ実装してみてください。
以上で解説を終わります。