jqueryでタグの絞り込みを実装する

実装したもの

See the Pen siborikomi by yoshida (@yoshi090) on CodePen.

説明

参考サイトのコードとほぼ同じです。
参考サイト：jQueryでリスト表示を絞り込む処理を実装する

ただやりたかったことと微妙に違い、下記の部分をカスタマイズしました。

OR検索ではなくAND検索にする

参考サイトでは複数のタグを選択した時、それらを含む全てのコンテンツが表示されます。今回はそうではなく、選択したタグのみを含むコンテンツを表示させるようにしました。
これはリスト内のタグを配列ではなく個別のdata-tagとして記述することで実現しました。
（data-categoryとdata-tagに名前が分かれてますが今回意味はないです）

index.html

<li class="list_item" data-category1='りんご' data-tag3='リール' data-tag4='ルイーダ' data-tag13='スコーン'>

何も表示するものがない時メッセージを表示する

以下部分を追記しました。コンテンツの数を取得してメッセージを表示させています。

page.js

//表示されるものがない時の処理
if($('.disnone').length){
 if($('.list_item').length != $('.is-hide').length){ 
	$('.disnone').remove();
 }
 return false;
}else if($('.list_item').length == $('.is-hide').length){
  $('.list').append('<li class="disnone">\u8868\u793a\u3059\u308b\u9805\u76ee\u304c\u3042\u308a\u307e\u305b\u3093</li>');
}

ALLボタンを押した時にリセットして全て表示させる

以下部分を追記しました。
・ALL以外にチェックが入っていなかったらALLにチェックをつける。そうでなければALLのチェックを外す
・ALLが押されたとき、他のチェックボックスのチェックを外す。コンテンツの非表示を解除する

page.js

var allBtn = 'input[name="all"]';

~~~省略~~~

//ALLが押された時の処理
 if(!$(searchBox + ' input').is(':checked')){
  $(allBtn).prop('checked',true);
 }
 else{
  $(allBtn).prop('checked',false);
 }

 $(allBtn).on('click', function(){
  $(searchBox + ' input').prop('checked',false);
  $('.disnone').remove();
  $(listItem).removeClass(hideClass);
 });

参考サイト