POSTED: / UPDATED:2019年11月19日

JSでフィルタリング機能を付ける方法

JavaScriptとjQueryを使って、サイト内でコンテンツをフィルタリングする方法をご紹介します。

主な使いどころは、たくさんあるニュースをジャンル分けし、選んだジャンルのニュースだけを表示させるなどの場合です。
他にも、商品のジャンル分けなど、種類別に並べなおす、という場面で非常に便利です。

まずは実例をご覧ください。

こちらにALL/RED/GREEN/BLUEの4つのボタンがあります。
これらを押すと、フィルターがかかり、その色の四角だけが表示されます。

ALLを押すと再び全てが表示されます。

  • ALL
  • RED
  • GREEN
  • BLUE
  • 赤1
  • 緑1
  • 青1
  • 赤2
  • 緑2
  • 青2
  • 赤3
  • 緑3
  • 青3
  • 赤4
  • 緑4
  • 青4
  • 赤5
  • 緑5
  • 青5

実際のソースコードと解説

実際のソースコードはこちらです。
解説は後ほどさらに下の方に書いておきます。

HTML

対応するボタンとコンテンツに同じクラスを付与します。つまり、REDのボタンと赤のコンテンツにredというクラスを付けます。
現在選択されているボタンにis_activeクラスを付けます。ページにアクセスした初期状態ではALLのボタンに付いているようにします。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<!-- ボタンになるリスト -->
<ul id="filterBtnList">
<li id="filterAll" class="all is_active">ALL</li>
<li id="filterRed" class="red">RED</li>
<li id="filterGreen" class="green">GREEN</li>
<li id="filterBlue" class="blue">BLUE</li>
</ul>
 
<!-- ソートするコンテンツ -->
<ul class="test_list">
<li class="red box">赤1</li>
<li class="green box">緑1</li>
<li class="blue box">青1</li>
<li class="red box">赤2</li>
<li class="green box">緑2</li>
<li class="blue box">青2</li>
<li class="red box">赤3</li>
<li class="green box">緑3</li>
<li class="blue box">青3</li>
　　　<!-- 要素はいくつでも並べられる -->
</ul>

JavaScript

実装する動作を文章で表現するとこのようになります。

  1. いずれかのボタンをクリックしたとき、
  2. もし、クリックしたボタンにis_activeが無い場合は、
  3. クリックしたボタンのclassを取得し、全てのボタンからis_activeを削除する
  4. そして、クリックしたボタンにis_activeを付与する
  5. 全ての要素を一旦フェードアウト(削除)
  6. クリックしたボタンと同じclassを持っているコンテンツを表示する
  7. もしクリックしたボタンがALLなら、すべてのコンテンツを表示する
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
jQuery(function($) {
 
/* 要素を取得(ボタンと要素) */
var btnList = $('#filterBtnList *'),
btnAll = $('#filterAll'),
btnRed = $('#filterRed'),
btnGreen = $('#filterGreen'),
btnBlue = $('#filterBlue'),
box = $('.box');
 
/* ボタンのいずれかをクリックした場合 */
btnList.click(function(){
  if(!($(this).hasClass('is_active'))){
     var filterClass = $(this).attr('class');   
     btnList.removeClass('is_active');
     $(this).addClass('is_active');
 
     box.each(function() {
        $(this).fadeOut(0);
          if($(this).hasClass(filterClass)){
            $(this).stop().fadeIn(300);
          }else if(filterClass === 'all'){
            box.stop().fadeIn(300);    
          }
     });   
  }
});
 
});

CSS

今回の実装ではスタイルはあまり関係ありません。
ボタンやコンテンツをリストではなくdivなどでも問題ありません。

ポイントはis_activeクラスの使い方で、このクラスがjsによって選ばれているボタンに付与されます。そのため、それが判るようなスタイルにします。

この例では、is_activeとhoverを同じスタイルにしています。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*ボタンのリスト*/
ul#filterBtnList{
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}
ul#filterBtnList li{
    display: inline-block;
    padding: 5px;
    font-size: 12px;
    border: solid 1px #000;
    cursor: pointer;
}
ul#filterBtnList li:hover{
    background-color: black;
    color: white;
}
ul#filterBtnList li.is_active{
    background-color: black;
    color: white;
}
 
/*コンテンツのリスト*/
ul.test_list{
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.test_list li{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 5px 5px 0;
    color: #fff;
    font-size: 10px;
    text-align: center;
}
ul.test_list li.red{background-color: #db5858;}
ul.test_list li.green{background-color: #63a94d;}
ul.test_list li.blue{background-color: #4e57cb;}

まとめ

頻出のスクリプトだと思いますが、丁寧に解説してみました。

非常に便利なので 場合に合わせてカスタマイズしながら 使ってみてください。

この記事をシェアする

  • Xにシェア
  • facebookにシェア
  • LINEにシェア
  • POCKETにシェア

関連記事