選択した項目で絞り込み（フィルター）を複数表示させる方法

Question

選択した項目で絞り込み（フィルター）を複数表示させたいです

https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html

上記リンクを参考に絞り込みを行いたいと考えています。
参考にしているのは「1. 選択した項目で絞り込み検索をする」です。

デモを見ていただくとわかりやすいのですが、
グループA.B.C.D…それぞれに国が表示します。

やりたいことは、例えば、グループAで表示するロシアを
グループB.Cにも表示させたいです。

jQueryやScriptは無知の為、ご教授いただけると助かります。

Answer 1

たとえばこう

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('.search span').on('click',function(){
    $(this).addClass('is-active').siblings().removeClass('is-active');
    var g=$(this).data('group');
    if(g==""){
      $('.list li').show();
    }else{
      $('.list li').hide();
      $('.list [data-group*='+g+']').show();
    }
  });
});
</script>

<style>
.is-active{background-Color:black;color:white;}
</style>
<div class="search">
    <span class="search_item is-active" data-group="">ALL</span>
    <span class="search_item" data-group="a">グループA</span>
    <span class="search_item" data-group="b">グループB</span>
    <span class="search_item" data-group="c">グループC</span>
</div>

<ul class="list">
    <li class="list_item" data-group="a,b,c">ロシア</li>
    <li class="list_item" data-group="c">フランス</li>
    <li class="list_item" data-group="b">ポルトガル</li>
    <li class="list_item" data-group="c">デンマーク</li>
    <li class="list_item" data-group="b">スペイン</li>
    <li class="list_item" data-group="b">イラン</li>
    <li class="list_item" data-group="a">サウジアラビア</li>
    <li class="list_item" data-group="c">オーストラリア</li>
    <li class="list_item" data-group="b">モロッコ</li>
    <li class="list_item" data-group="a">エジプト</li>
    <li class="list_item" data-group="a">ウルグアイ</li>
    <li class="list_item" data-group="c">ペルー</li>
</ul>

※今回はデータのセパレータに「,」を使用しましたが競合にきをつければ何をつかってもよいでしょう

Comments

[junjunoo]

ありがとうございます！大変助かりました！