jQueryを利用した絞り込み機能の実装方法

Question

前提・実現したいこと

jQueryを利用してhtmlページ上で絞り込み機能を実装したいと考えております。
以下参考ページを元に絞り込みだけは機能するようになったのですが、更に応用した機能を取り入れたい状況です。
参考URL : https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html （1.の内容）

「ALL」「ONEMAN」「EVENT」「INSTORE」「OTHER」と5つにカテゴリ分けをし、それぞれのグループに該当する項目をクリックすると、その要素だけが表示されるという仕組みを考えているのですが、「OTHER」のみ少し他とは異なる表示方法にしたいです。

最初にページを開いた段階では「OTHER」のカテゴリに属する項目は非表示になっており、「ALL」をクリックした場合か「OTHER」をクリックした場合にのみ、「OTHER」グループに該当する項目が表示される形にしたいのです。

この場合、どのような修正を行えば上記のような動作が可能になりますでしょうか？
以下に簡素にした現在のコードを記載いたします。

該当のソースコード

——————html——————

<div class="search"> <span class="search_item is-active" data-group="">ALL</span> <span class="search_item" data-group="ONEMAN">ONEMAN</span> <span class="search_item" data-group="EVENT">EVENT</span> <span class="search_item" data-group="INSTORE">INSTORE</span> <span class="search_item" data-group="OTHER">OTHER</span> </div> <div class="list_item" data-group="EVENT">イベント1</div> <div class="list_item" data-group="EVENT">イベント2</div> <div class="list_item" data-group=“ONEMAN”>ワンマン1</div> <div class="list_item" data-group=“EVENT”>イベント3</div> <div class="list_item" data-group=“INSTORE”>インストア1</div> <div class="list_item" data-group=“EVENT”>イベント4</div> <div class="list_item" data-group=“OTHER”>アザー1</div> <div class="list_item" data-group=“ONEMAN”>ワンマン2</div>

——————CSS——————

.search_item {
display: inline-block;
padding: 3px;
cursor: pointer;
}
.search_item.is-active {
color: white;
background-color: black;
}
.is-hide {
display: none;
}

——————JS——————

var searchItem = '.search_item'; // 絞り込む項目を選択するエリア
var listItem = '.list_item'; // 絞り込み対象のアイテム
var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名
var activeClass = 'is-active'; // 選択中のグループに付与されるclass名

$(function() {
// 絞り込みを変更した時
$(searchItem).on('click', function() {

    $(searchItem).removeClass(activeClass);
    var group = $(this).addClass(activeClass).data('group');
    search_filter(group);
});

});

/**

• リストの絞り込みを行う
• @param {String} group data属性の値

*/
function search_filter(group) {
// 非表示状態を解除
$(listItem).removeClass(hideClass);
// 値が空の場合はすべて表示
if(group === '') {
return;
}
// リスト内の各アイテムをチェック
for (var i = 0; i < $(listItem).length; i++) {
// アイテムに設定している項目を取得
var itemData = $(listItem).eq(i).data('group');
// 絞り込み対象かどうかを調べる
if(itemData !== group) {
$(listItem).eq(i).addClass(hideClass);
}
}
}

Answer 1

最初にページを開いた段階では「OTHER」のカテゴリに属する項目は非表示になっており、「ALL」をクリックした場合か「OTHER」をクリックした場合にのみ、「OTHER」グループに該当する項目が表示される形にしたいのです。

ALLに「is-active」クラスがついているのでデフォルトはALLなのですよね？
そうなるとALL時にOTHERを隠すのはロジックがおかしいです。

最初にOTHERを隠すだけなら
$('.list_item.OTHER').hide();
するだけだと思います

<style>
.is-active{color:red}
</style>
<script>
$(function(){
  $('.list_item.OTHER').hide();
  $('.search_item').on('click',function(){
    $('.search_item').removeClass('is-active');
    $(this).addClass('is-active');
    $('.list_item').hide().filter($(this).data('group')).show();
  });
});
</script>

<div class="search">
<span class="search_item is-active" data-group="*">ALL</span>
<span class="search_item" data-group=".ONEMAN">ONEMAN</span>
<span class="search_item" data-group=".EVENT">EVENT</span>
<span class="search_item" data-group=".INSTORE">INSTORE</span>
<span class="search_item" data-group=".OTHER">OTHER</span>    
</div>    

<div class="list_item EVENT">イベント1</div>
<div class="list_item EVENT">イベント2</div>
<div class="list_item ONEMAN">ワンマン1</div>
<div class="list_item EVENT">イベント3</div>
<div class="list_item INSTORE">インストア1</div>
<div class="list_item EVENT">イベント4</div>
<div class="list_item OTHER">アザー1</div>
<div class="list_item ONEMAN">ワンマン2</div>