【jQuery】カテゴリーの絞り込み（ソート）
はじめに
どうも、NNCの石上です。
写真家さんとかのサイトを見ていると、ジャンルごとに写真を表示したりしてますよね。難しそうに見えて意外と簡単に実装できるので、試してみましょう。
カテゴリーソート
今回作成するのは「カテゴリーソート」機能になります。
画像のように、赤・青・黄の三種類のブロックがあります。
上のナビゲーションから、例えば「red」をクリックすると…
こんな感じで赤いブロックだけが表示されます。「blue」・「yellow」をクリックした時も同様です。
実際のコード
それではコードの方を確認してみましょう。
<ul class="list">
<li class="all">all</li>
<li class="red">red</li>
<li class="blue">blue</li>
<li class="yellow">yellow</li>
</ul>
<ul class="panel">
<li class="active yellow"></li>
<li class="active red"></li>
<li class="active blue"></li>
<li class="active red"></li>
<li class="active red"></li>
<li class="active yellow"></li>
<li class="active blue"></li>
<li class="active yellow"></li>
<li class="active blue"></li>
<li class="active red"></li>
<li class="active yellow"></li>
<li class="active blue"></li>
</ul>.list {
display: flex;
justify-content: center;
width: 500px;
margin: 0 auto 30px;
}
.list li {
margin-right: 25px;
line-height: 1;
color: #333;
font-size: 1.6rem;
cursor: pointer;
}
.list li:last-of-type {
margin-right: 0;
}
.panel {
display: flex;
flex-wrap: wrap;
width: 700px;
margin: 0 auto;
}
.panel li {
display: none;
width: 24%;
margin-right: 1%;
margin-bottom: 10px;
height: 200px;
background-color: #333;
}
.panel li.red {
background-color: #E8110F;
}
.panel li.blue {
background-color: #1B6AA5;
}
.panel li.yellow {
background-color: #FBC723;
}
.panel li.active {
display: block;
}$(function(){
$('.list li').on('click',function(){
var category = $(this).attr('class');
$('.panel li').removeClass('active');
if(category == 'all'){
$('.panel li').addClass('active');
}else{
$('.panel li[class='+category+']').addClass('active');
};
});
});解説
全体のステップを確認しましょう。
1.ナビゲーションの項目(.list li)をクリックした時、
2.それに付与されているクラス名を取得して変数に格納し、
3.同じクラス名が割り振られているブロックのみ表示
htmlを確認してもらうと、.listと.panelの中のliに「red/blue/yellow」というクラスが共通で付与されているのが分かると思います。ここでは、例えば「.list > li.red」をクリックした時に「.panel > li.red」だけが表示される具合にします。
$('.list li').on('click',function(){
var category = $(this).attr('class');
$('.panel li').removeClass('active');ナビゲーションの項目(.list li)をクリックした際に、まずはそれに付与されているクラスを変数に格納します。attrメソッドでクラスを取得してあげましょう。その後、下のブロック群(.panel li)全てに共通して付与されている「active」というクラスを一旦除去します(これにより表示・非表示を制御しています)。removeClassメソッドを使ってあげましょう。
if(category == 'all'){
$('.panel li').addClass('active');
}else{
$('.panel li[class='+category+']').addClass('active');
};その後の処理については、以下の２パターンで条件を分岐させます。
・「allをクリックした場合」
・「それ以外(つまり、red/blue/yellowのどれか)をクリックした場合」
・「allをクリックした場合」
こちらはとてもシンプルで、全てのブロックを表示してしまえば良いのです。よって、全てのブロック(.panel li)にaddClassメソッドを利用して「active」というクラスを付与してあげます。
・「それ以外をクリックした場合」
変数：categoryに格納された名前と同じクラス名を持つブロックだけを表示します。
「 .panel li[class = ‘+category+’] 」と言うのが該当の記述となるのですが、ここでは「属性フィルタ」と「文字連結」が用いられています。
[属性名 = ‘値’]という記述で、この条件と合致する物だけを抽出することが可能となります。例えば「 li[class = red] 」と書けば、「’red’というクラスを持つli」が対象要素として認識されます。
値の部分には変数:categoryを記述するのですが、この際、[class = category]と書いてしまうと、「categoryというクラスを持つli」と認識されてしまいます。つまり、変数に格納した文字列を使用することができないのです。
変数として認識させるためには、前後に”+”を書いてあげて、それをクォーテーションで囲みます。
以上で完成です！
