【jQuery】フィルタリング機能を実装【カテゴリごとのグループ分けに便利】

ギャラリーページなどで、カテゴリごとに絞り込みをしたいという場合があると思いますが、今回はjQueryで簡単に絞り込み機能を作ってみます。

ユーザービリティが確実に向上しますので、是非覚えておいてください。

DEMOはこちら

実装方法

以下のHTMLとCSS、そしてjQueryを用意します。まず、HTMLで絞り込みボタンと絞り込まれる要素を定義します。

絞り込みボタンにdata-filter属性で、カテゴリーを指定します。そして画像（絞り込まれる要素）を、data-categoryを使い、カテゴリー分けします。

HTML

<div class="btn">
  <a href="" class="all" data-filter="all">ALL</a>
  <a href="" class="html" data-filter="html">HTML</a>
  <a href="" class="css" data-filter="css">CSS</a>
</div>

<ul class="list">
  <li class="html" data-category="html"><img src="01.jpg"></li>
  <li class="css" data-category="css"><img src="02.jpg"></li>
  <li class="html" data-category="html"><img src="03.jpg"></li>
  <li class="html" data-category="html"><img src="04.jpg"></li>
</ul>

お次はCSSを用意します。

fadeInメソッドとfadeOutメソッドだけでも表示/非表示のアニメーションはできるのですが、今回はanimationと@keyframesを使い、少しだけ動きを加えます（これはいくらでもカスタマイズできますので、お好みでどうぞ！）。

CSS

.list{
  display: flex;
  flex-wrap: wrap;
}

.list li{
  width: 49%;
  margin-right: 1%;
  list-style:none;
  animation: test .8s;
}

.list li:nth-child(even){
 margin-right: 0;
}

@keyframes test {
  0% {
   transform: scale(.1);
  }
  100% {
    transform: none;
  }
}

そして、jQueryの記述は以下の通りになります。

jQuery

$(function(){
  var $btn = $('.btn [data-filter]'),
  $list = $('.list [data-category]');
  
  $btn.on('click', function(e) {
    e.preventDefault();
    
    var $btnTxt = $(this).attr('data-filter');
    
    if ($btnTxt == 'all'){
      $list.fadeOut().promise().done(function() {
        $list.addClass('animate').fadeIn();
      });
    } else {
      $list.fadeOut().promise().done(function() {
        $list.filter('[data-category = "' + $btnTxt + '"]').addClass('animate').fadeIn();
      });
    }
  });
});

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

2と3行目

「data-filterをもつ.btn内の要素」を変数btnに代入します。

そして「data-categoryをもつ.list内の要素」を変数listに代入します。

var $btn = $('.btn [data-filter]'),
$list = $('.list [data-category]');

5行目

「絞り込みボタンをクリックしたら以下の処理を実行する」という指定になります。

次の行のe.preventDefault()を指定するために、function()ではなくfunction(e)と記述します。

$btn.on('click', function(e){
  //　ここに処理内容を記述
});

6行目

通常aタグをクリックすると指定ページに飛ばされますが、その処理をキャンセルするためにe.preventDefault()を指定します。

e.preventDefault();

8行目

「クリックされた絞り込みボタンのdata-filter属性の値」を変数btnTxtに代入します。

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

10行目

「もし、クリックされた絞り込みボタンのdata-filter属性の値がallなら以下の処理を実行する」という指定になります。

if ($btnTxt == 'all') {
//　ここに処理内容を記述
} 

11〜13行目

「data-categoryをもつ.list内の要素」を全て.fadeOutメソッドで非表示にし、それが正常に実行され完了したら、要素に.animateを追加してフェードインで表示させます。

「それが正常に実行され完了したら・・・」の部分はpromiseとdoneメソッドを連結させることでできます。

$list.fadeOut().promise().done(function() {
  $list.addClass('animate').fadeIn();
});

14行目

「もし、クリックされた絞り込みボタンのdata-filter属性の値がall以外なら以下の処理を実行する」という指定になります。

else {
//　ここに処理内容を記述
}

15〜17行目

「data-categoryをもつ.list内の要素」を全て.fadeOutメソッドで非表示にし、それが正常に実行され完了したら、「クリックされた絞り込みボタンのdata-filter属性の値」と同じ値のカテゴリーを持つ要素のみ.animateを追加してフェードインで表示させます。

$list.fadeOut().promise().done(function() {
  $list.filter('[data-category = "' + $btnTxt + '"]').addClass('animate').fadeIn();
});

まとめ

いかがでしたか？CSSをいじるだけで、オリジナルの動きをする絞り込み機能を作ることができますので、慣れたらオリジナルの絞り込み機能作りに是非チャレンジしてみてください！

jQuery関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。