data属性を利用して絞り込みをする方法

data属性を用いて、シンプルな絞り込み機能を実装する方法です。

data属性を指定する
jQueryで絞り込みの設定をする
1. コールバック関数を使用する

data属性を指定する

まずはじめに、フィルタリングさせたいHTMLにdata属性を指定していきます。data-以下は任意なので好きな名前を指定しましょう。

<ul class="category-btn">
  <li><a href="#" data-filter="all">ALL</a></li>
  <li><a href="#" data-filter="javascript">JavaScript</a></li>
  <li><a href="#" data-filter="css">CSS</a></li>
  <li><a href="#" data-filter="wordpress">WordPress</a></li>
</ul>

<ul class="category-list">
  <li data-category="javascript">JavaScript</li>
  <li data-category="css">CSS</li>
  <li data-category="wordpress">WordPress</li>
  <li data-category="css">CSS</li>
  <li data-category="wordpress">WordPress</li>
  <li data-category="javascript">JavaScript</li>
  <li data-category="wordpress">WordPress</li>
  <li data-category="javascript">JavaScript</li>
  <li data-category="css">CSS</li>
</ul>

jQueryで絞り込みの設定をする

次に、カテゴリーを選択したら、そのカテゴリーが絞り込めるようにしていきます。パッと切り替わるのも良いとは思いますが、下記はis-animateというクラスを追加し、アニメーション用のスタイルをCSSで設定しています。

$(function(){
   var $btn = $('.category-btn [data-filter]'),
       $list = $('.category-list [data-category]');
   
   $btn.on('click', function() {
     var $btnCat = $(this).attr('data-filter');
    
     $list.removeClass('is-animate');
    
     if ($btnCat == 'all') {
       $list.show().addClass('is-animate');
      
     } else {
        $list.hide().removeClass('is-animate').filter('[data-category = "' + $btnCat + '"]').show().addClass('is-animate');
     }
     return false;
   });
 });

.is-animate {
   opacity: 1;
   animation: .6s zoom-in;
}

@keyframes zoom-in {
   0% {
     opacity: 0.3;
     transform: scale(.8);
   }
   100% {
     opacity: 1;
     transform: none;
   }
}

実際の動きは以下を参考にしてください。

See the Pen
data-attribute filter by gri-t (@gri-t)
on CodePen.

コールバック関数を使用する

先ほどの動きと似ていますが、コールバック関数を用いて、.fadeOut()した後に対象のカテゴリーにis-animateというクラスを付与して、fadeIn();させています。

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

.is-animate {
   animation: .6s zoom-in;
}

@keyframes zoom-in {
   0% {
    transform: scale(.8);
   }
   100% {
     transform: none;
   }
}

See the Pen
data-attribute filter by gri-t (@gri-t)
on CodePen.

以上が、data属性を利用して絞り込みをする方法でした。