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