WEB上で絞り込み機能などが出来ないか？
【超便利】複数の絞り込み機能をCSSとJSで簡単作成
プログラミング といった要望が来る可能性も。。。 （まあ、私が実際に依頼された内容なんですが…笑） そんな時に、便利に使える絞り込み機能を作りましたので、シェアしたいと思います！ 複数の条件を満たした場合、表や写真などを表示したい時などに使えるので是非参考にして頂ければと思います！
絞り込み機能の条件
今回作った機能を使えば、1種類だけでの絞り込みも可能ですが、 複数の絞りの方がより便利に使えると思います。 参考として、ペット（犬）の条件を満たしたときに、画像を表示する機能を作りました。 条件は以下の3種類です。- 種類（チワワ、柴犬、ブルドック、ポメラニアン）
- 色（茶色、黒色、白色）
- 体型（大人、赤ちゃん）
| チワワ | 柴犬 | ブルドック | ポメラニアン | ||
|---|---|---|---|---|---|
| 茶色 | 大人 |  |  | ・・・ | ・・・ |
| 赤ちゃん |  |  | ・・・ | ・・・ | |
| 黒色 | 大人 | ・・・ | ・・・ | ・・・ | ・・・ |
| 赤ちゃん | ・・・ | ・・・ | ・・・ | ・・・ | |
| 白色 | 大人 | ・・・ | ・・・ | ・・・ | ・・・ |
| 赤ちゃん | ・・・ | ・・・ | ・・・ | ・・・ | |
絞り込み機能の使い方
ペットの例を元に絞り込み機能を実装しました。 以下のカテゴリーを選択すると、条件を満たした画像だけが出力されるようになります。See the Pen multiple-sort by ryang0613 (@ryang0613) on CodePen.
別ページでみる 簡単に絞り込みが出来ることが確認できましたか？？ これならスマホ画面でも選択できますし、求めているものが簡単に見つけ出すことができます。 ソースコードはコピーして使う事ができますので、活用して頂ければ幸いです。 ご覧いただきありがとうございました。 ]]>
