:: jQueryを使ってフィルタラブルを実装する

jQueryを使ってフィルタラブルを実装する方法を紹介します。フィルタラブルって何ってなっていると思います。フィルタラブルとは写真などの要素のタグを付けておいてボタンをクリックすると、タグと一致するものだけに表示を切り替えることが出来るものです。

こちらの記事で、jQueryライブラリのMixItUpを使った実装方法を紹介しているのでご覧ください。
:: jQueryライブラリ（MixItUp）を使ってフィルタラブルを実装する

よくポートフォリオとかに使われているこんな感じのやつです↓↓

以下に全てのファイルがあるので、ダウンロードして自由にお使いください。
https://www.grooving-earth.com/wp-content/uploads/2019/02/filterable-Using-jQuery.zip

写真は:: 商用でも利用出来る海外の高解像度の写真素材20選サービスで紹介したサイトのものを使っています。

フィルタラブルを実装する上で最初に知っておくこと

今回使うファイルはindex.html、script.js、style.cssと画像ファイルだけです。使っている技術はhtml、Javasript、css、Bootstrap、jQueryです。

百聞は一見にしかずですね。まずは動作やソースコードを確認してみてください。

See the Pen Filterable With jQuery by SHO EGAWA (@sho-egawa) on CodePen.

フィルタラブルの実装解説

htmlとJavasripのソースコードを通して詳細を解説します。

htmlのボタン箇所

まずはhtmlのボタン箇所の解説です。

<div class="row mb-5">
  <div class="col-6 col-md-4 mb-3">
    <span class="trigger active btn btn-light btn-block btn-sm" data-filter="all">All</span>
  </div>
  <div class="col-6 col-md-4 mb-3">
    <span class="trigger btn btn-light btn-block btn-sm" data-filter="australia">Australia</span>
  </div>
  <div class="col-6 col-md-4 mb-3">
    <span class="trigger btn btn-light btn-block btn-sm" data-filter="japan">Japan</span>
  </div>
  <div class="col-6 col-md-4 mb-3">
    <span class="trigger btn btn-light btn-block btn-sm" data-filter="usa">USA</span>
  </div>
  <div class="col-6 col-md-4 mb-3">
    <span class="trigger btn btn-light btn-block btn-sm" data-filter="spain">Spain</span>
  </div>
  <div class="col-6 col-md-4 mb-3">
    <span class="trigger btn btn-light btn-block btn-sm" data-filter="india">India</span>
  </div>
</div>

</div>

<span class="trigger btn btn-light btn-block btn-sm" data-filter="australia">Australia</span>

</div>

<span class="trigger btn btn-light btn-block btn-sm" data-filter="japan">Japan</span>

</div>

</div>

<span class="trigger btn btn-light btn-block btn-sm" data-filter="spain">Spain</span>

</div>

<span class="trigger btn btn-light btn-block btn-sm" data-filter="india">India</span>

</div>

triggerクラスと、data-filter=”***”がポイントです。triggerクラスはjsでクリックアクションを操作する時に使います。

data-filter=”***”はタグや属性を指定します。名称は何でも構いません。

今回はall、australia、japan、usa、spain、indiaとしています。

htmlの写真箇所

次にhtmlの写真箇所の解説です。

  <div class="row">
    <div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-1.jpg">Australia01</div>
    <div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-1.jpg">Japan01</div>
    <div class="col-6 col-md-4 mb-3 text-center filter usa"><img src="images/usa-1.jpg">USA01</div>
    <div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-1.jpg">Spain01</div>
    <div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-1.jpg">India01</div>
    <div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-2.jpg">Australia02</div>
    <div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-2.jpg">Japan02</div>
    <div class="col-6 col-md-4 mb-3 text-center filter usa"><img src="images/usa-2.jpg">USA02</div>
    <div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-2.jpg">Spain02</div>
    <div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-2.jpg">India02</div>
    <div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-3.jpg">Australia03</div>
    <div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-3.jpg">Japan03</div>
    <div class="col-6 col-md-4 mb-3 text-center filter usa"><img src="images/usa-3.jpg">USA03</div>
    <div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-3.jpg">Spain03</div>
    <div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-3.jpg">India03</div>
    <div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-4.jpg">Australia04</div>
    <div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-4.jpg">Japan04</div>
    <div class="col-6 col-md-4 mb-3 text-center filter usa"><img src="images/usa-4.jpg">USA04</div>
    <div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-4.jpg">Spain04</div>
    <div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-4.jpg">India04</div>
    <div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-5.jpg">Australia05</div>
    <div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-5.jpg">Japan05</div>
    <div class="col-6 col-md-4 mb-3 text-center filter usa"><img src="images/usa-5.jpg">USA05</div>
    <div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-5.jpg">Spain05</div>
    <div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-5.jpg">India05</div>
    <div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-6.jpg">Australia06</div>
    <div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-6.jpg">Japan06</div>
    <div class="col-6 col-md-4 mb-3 text-center filter usa"><img src="images/usa-6.jpg">USA06</div>
    <div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-6.jpg">Spain06</div>
    <div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-6.jpg">India06</div>
  </div>

<div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-1.jpg">Australia01</div>

<div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-1.jpg">Japan01</div>

<div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-1.jpg">Spain01</div>

<div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-1.jpg">India01</div>

<div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-2.jpg">Australia02</div>

<div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-2.jpg">Japan02</div>

<div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-2.jpg">Spain02</div>

<div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-2.jpg">India02</div>

<div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-3.jpg">Australia03</div>

<div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-3.jpg">Japan03</div>

<div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-3.jpg">Spain03</div>

<div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-3.jpg">India03</div>

<div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-4.jpg">Australia04</div>

<div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-4.jpg">Japan04</div>

<div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-4.jpg">Spain04</div>

<div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-4.jpg">India04</div>

<div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-5.jpg">Australia05</div>

<div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-5.jpg">Japan05</div>

<div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-5.jpg">Spain05</div>

<div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-5.jpg">India05</div>

<div class="col-6 col-md-4 mb-3 text-center filter australia"><img src="images/australia-6.jpg">Australia06</div>

<div class="col-6 col-md-4 mb-3 text-center filter japan"><img src="images/japan-6.jpg">Japan06</div>

<div class="col-6 col-md-4 mb-3 text-center filter spain"><img src="images/spain-6.jpg">Spain06</div>

<div class="col-6 col-md-4 mb-3 text-center filter india"><img src="images/india-6.jpg">India06</div>

</div>

ポイントはfilterとその後ろにあるaustralia、japan、usa、spain、indiaの箇所です。Javascriptでfilter ****を操作することで表示したり消したりといった動作をします。

Javascriptの解説

最後にJavascriptの解説です。

$(document).ready(function() {
  $('.trigger').click(function() {
    var value = $(this).attr('data-filter');
    if (value == 'all') {
      $('.filter').show('1000');
    } else {
      $('.filter').not('.'+value).hide('1000');
      $('.filter').filter('.'+value).show('1000');
    }
    $(document).on('click', '.trigger', function () {
      $('.trigger').removeClass('active');
      $(this).addClass('active');
    });
  })
})

$(document).ready(function() {

$('.trigger').click(function() {

var value = $(this).attr('data-filter');

if (value == 'all') {

$('.filter').show('1000');

} else {

$('.filter').not('.'+value).hide('1000');

$('.filter').filter('.'+value).show('1000');

}

$(document).on('click', '.trigger', function () {

$('.trigger').removeClass('active');

$(this).addClass('active');

});

})

2行目で.triggerクラスをクリックされた時の処理をしています。これは「ボタンがクリックされた時」を意味しています。
3行目でattrメソッドを使ってdata-filterの値をvalue変数に格納しています。
4行目から5行目まではvalueがallだった場合にshowオブジェクトを使って表示1000ミリセカンド、つまり1秒かけて表示しています。ページにアクセスした際は全ての写真を表示しています。
7行目から8行目まではvalueの値がallでなかった時にの処理です。notオブジェクトを使ってvalueの値に該当する要素をhideオブジェクトを使って1000ミリセカンドで消しています。これで一度全ての要素を消してから、次にfilterオブジェクトを使ってvalueの値に該当する要素をshowオブジェクトを使って1000ミリセカンドで表示しています。
10行目から13行目まではボタンを選択している場合はtriggerクラスと同じ場所にactiveクラスを追加して、選択していないものはtriggerクラスと同じ場所にあるactiveクラスを削除する処理をしています。activeクラスを追加することでボタンの色が濃くなるため、自分が何を選択しているかがひと目で分かるようになります。