Written by Kasumi

【簡単】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名とクラス名を任意に変えるだけの簡単な検索フォームなのでぜひ実装してみてください。

以上で解説を終わります。

目次

関連記事

jQuery

【簡単】jQueryを使って、入力中の値をリアルタイムでチェック・取得する方法

更新日:2022.09.09
1405
jQuery

jQueryを使ってJSONデータを取得、配列にして値を出力する方法【Ajaxで解決!】

更新日:2022.09.09
3402
jQuery

【日本語対応】Datepickerを使って予約フォームにカレンダー式日付選択を入れる方法【jQuery】

更新日:2022.09.09
996
jQuery

webサイトにテキストコピーボタンを設置する方法【簡単】

更新日:2022.09.09
67