前提・実現したいこと

お世話になります。宜しくお願い致します。

リストを複数の項目で絞り込みを行いたいと思い、あるサイトを参考にjQueryで実装致しました。
サイトで紹介されていました通りの動きは出来たのですが、下記2点が実現出来なく困っております。

1.別項目選択でも同じ内容を表示したい
項目1の「ホテル」を選択した場合、【ホテルハワイ・ハワイアンレストラン】【五十嵐ホテル】【やどや】が結果として表示され、「レストラン」を選択した場合【海鮮レストラン】「観光地」を選択した場合【水族館】が表示されます。
【ホテルハワイ・ハワイアンレストラン】にはレストランも含まれている為、「ホテル」未選択で「レストラン」を選択した場合も【ホテルハワイ・ハワイアンレストラン】が表示されるようにしたいです。
また、【ホテルハワイ・ハワイアンレストラン】のようなパターンは今後増える予定です。

2.項目未選択時は全リスト非表示
各項目が未選択の場合、選択結果表示部は非表示で項目からなにか選択された時点で選択結果表示部に表示するようにしたいです。

参考にしたサイトです
https://spreadsheep.net/search_by_javascript/

該当のソースコード

HTML
1<div class="js_conditions" data-type="type">
2    <div>項目1</div>
3    <div>
4        <ul>
5            <li><input id="type-hotel" type="checkbox" name="type" value="hotel"><label for="type-hotel">ホテル</label></li>
6            <li><input id="type-restaurant" type="checkbox" name="type" value="restaurant"><label for="type-restaurant">レストラン</label></li>
7			<li><input id="type-spot" type="checkbox" name="type" value="spot"><label for="type-spot">観光地</label></li>
8        </ul>
9    </div>
10</div>
11
12<div class="js_conditions" data-type="object">
13    <div>項目2</div>
14    <div>
15        <ul>
16            <li><input id="object-resort" type="checkbox" name="object" value="resort"><label for="object-resort">リゾートホテル</label></li>
17            <li><input id="object-hiclass" type="checkbox" name="object" value="hiclass"><label for="object-hiclass">高級ホテル</label></li>
18			<li><input id="object-guesthouse" type="checkbox" name="object" value="guesthouse"><label for="object-guesthouse">民宿</label></li>
19        </ul>
20    </div>
21</div>
22
23<div class="js_conditions" data-type="period">
24    <div>項目3</div>
25    <div>
26        <ul>
27            <li><input id="period-100" type="checkbox" name="period" value="100"><label for="period-100">100</label></li>
28            <li><input id="period-200" type="checkbox" name="period" value="200"><label for="period-200">200</label></li>
29			<li><input id="period-300" type="checkbox" name="period" value="300"><label for="period-300">300</label></li>
30        </ul>
31
32    </div>
33</div>
34
35
36
37
38
39
40<div>
41    <ul>
42		<li class="js_target" data-type="hotel" data-object="resort" data-period="200">ホテルハワイ・ハワイアンレストラン</li>
43        <li class="js_target" data-type="hotel" data-object="hiclass" data-period="300">五十嵐ホテル</li>
44		<li class="js_target" data-type="hotel" data-object="hotel" data-period="100">やどや</li>
45		<li class="js_target" data-type="restaurant" data-object="resort" data-period="200">海鮮レストラン</li>
46		<li class="js_target" data-type="spot" data-object="hiclass" data-period="300">水族館</li>
47    </ul>
48
49</div>

CSS
1input {
2    display: none;
3}
4.js_target{
5  display: none;
6}
7.js_target.js_selected{
8  display: block;
9}
10.tab-btnbox > div:nth-of-type(2) ul li {
11    display: inline-block;
12    border: 1px solid #494949;
13    font-size: 16px;
14    margin: 0 5px 10px 0;
15}
16.tab-btnbox > div:nth-of-type(2) ul li label {
17    display: block;
18    width: 100%;
19    text-align: center;
20    padding: 10px 20px;
21    cursor: pointer;
22}

Javascript
1$(function(){
2  var box = $('.js_target');//検索対象のDOMを格納する
3  var conditions = $('.js_conditions');//現在の条件の選択状況を保持するオブジェクト
4  var findConditions;//各data-typeの小要素(input)を格納する
5  var currentType;//現在のdata-typeを示す
6  var count = 0;//検索ヒット数
7  var checkcount = 0;//各data-typeのチェックボックス選択数
8  var data_check = 0;//対象項目のデータがどれだけチェック状態と一致しているか
9 
10  var condition ={};//チェックボックスの入力状態を保持するオブジェクト
11 
12  $('.js_denominator').text(box.length);//件数表示の分母をセット
13 
14  for(var i = 0; i < conditions.length; i++){//ターゲットのdata-typeを参照し、メソッドとしてconditionに個別に代入する
15    currentType = conditions[i].getAttribute('data-type');
16    condition[currentType] = [];
17  }
18 
19  function setConditions(){//条件設定
20 
21    count = 0;
22    box.removeClass('js_selected');
23 
24    for(var i = 0; i < conditions.length; i++){//data-typeごとの処理
25 
26      currentType = conditions[i].getAttribute('data-type');
27 
28      findConditions = conditions[i].querySelectorAll('input');
29 
30      for(var n = 0; n< findConditions.length; n++){//inputごとの処理
31 
32        if(findConditions[n].checked){//現在選択中のインプットが選択されている場合
33          condition[currentType][findConditions[n].value] = true;
34          checkcount++
35        } else {
36          condition[currentType][findConditions[n].value] = false;
37        }
38        if(findConditions.length === n+1){//ループが最後の場合
39          if(checkcount === 0){
40            for(var t = 0; t < findConditions.length; t++){
41              condition[currentType][findConditions[t].value] = true;
42            }
43          }
44          checkcount = 0;
45        }
46      }
47    }
48 
49 
50    for(var m = 0, len = box.length; m< len; ++m){//最初に取得したターゲットの情報と、現在のinputの選択状態を比較して処理を行う
51 
52      for(var i = 0; i < conditions.length; i++){//ターゲットのdata-typeを参照し、メソッドとしてconditionに個別に代入する
53        currentType = conditions[i].getAttribute('data-type');
54         
55        if(condition[currentType][$(box[m]).data(currentType)]){
56          data_check++;
57        } else {
58 
59        }
60      }
61 
62        if(data_check === conditions.length){
63          count++;
64          $(box[m]).addClass('js_selected');
65        }else{
66 
67        }
68        data_check = 0;
69 
70    }
71 
72 
73    $('.js_numerator').text(count);//件数表示の分子をセット
74  }
75 
76  setConditions();
77 
78  $(document).on('click','input',function(){
79 
80    setConditions();
81 
82  });
83 
84  $(document).on('click','.js_release',function(){
85 
86    $('.bl_selectBlock_check input').attr("checked", false);
87 
88    setConditions();
89 
90  });
91 
92
93});

試したこと

1つの項目選択で複数表示させる為にリスト部分のdata-typeにスペースを開けて複数記載してみましたが、反応しませんでした。
data-type="hotel restaurant"のようにしましたが、「hotel」「restaurant」どちらも反応しなくなりました。
jQueryも何度も見たのですが、どこでどう選択した項目が反応しているのか勉強不足の為検討も付きませんでした。

2つめの項目未選択時選択結果非表示についてですが、CSSで出来ないかと考えてみましたが、
クラス「.js_selected」のJS側での制御がどのようになっているのか、なんとなくでしか理解出来なかった為コードを触る事が出来ませんでした。

jQueryの勉強不足、理解不足な為ほぼ手を付けれずまた具体的な説明が出来ず大変申し訳ございませんが、皆様のお知恵をお借りしたいと存じます。
宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

AとかBとかソースに書かれていないので命題が意味不明です

とりあえず項目１を選ぶことでリストを表示・非表示する仕組みです
あと、なにをどうしたいのか明示してください

javascript
1<script>
2$(function(){
3  $('.js_target').hide();
4  $('[name=type]').on('change',function(){
5    var types=$('[name=type]:checked').map(function(){
6      return $(this).val();
7    }).get();
8    $('.js_target').hide().filter(function(){
9      return $.inArray($(this).data('type'),types)>=0;
10    }).show();
11  });
12});
13</script>
14<div class="js_conditions" data-type="type">
15    <div>項目1</div>
16    <div>
17        <ul>
18            <li><input id="type-hoge" type="checkbox" name="type" value="hoge"><label for="type-hoge">項目1の選択1</label></li>
19            <li><input id="type-rest" type="checkbox" name="type" value="rest"><label for="type-rest">項目1の選択2</label></li>
20        </ul>
21    </div>
22</div>
23<div class="js_conditions" data-type="object">
24    <div>項目2</div>
25    <div>
26        <ul>
27            <li><input id="object-one" type="checkbox" name="object" value="one"><label for="object-one">項目2の選択1</label></li>
28            <li><input id="object-two" type="checkbox" name="object" value="two"><label for="object-two">項目2の選択2</label></li>
29            <li><input id="object-three" type="checkbox" name="object" value="three"><label for="object-three">項目2の選択3</label></li>
30        </ul>
31    </div>
32</div>
33<div class="js_conditions" data-type="period">
34    <div>項目3</div>
35    <div>
36        <ul>
37            <li><input id="period-100" type="checkbox" name="period" value="100"><label for="period-100">100</label></li>
38            <li><input id="period-200" type="checkbox" name="period" value="200"><label for="period-200">200</label></li>
39            <li><input id="period-300" type="checkbox" name="period" value="300"><label for="period-300">300</label></li>
40        </ul>
41
42    </div>
43</div>
44<div>
45    <ul>
46        <li class="js_target" data-type="rest" data-object="one" data-period="100">リスト1</li>
47        <li class="js_target" data-type="hoge" data-object="two" data-period="200">リスト2</li>
48        <li class="js_target" data-type="rest" data-object="three" data-period="300">リスト3</li>
49    </ul>
50
51</div>

追記

なんとなく理解した内容を反映
カスタムデータに複数データを持つ方法

HTML
1data-type='["hotel","restaurant"]'
2data-type='["hotel"]'

のようにしてください。
ただし、他のタグがdata-typeを1種しか持たなくても配列形式にしてください

javascript
1<script>
2$(function(){
3  $('.js_target').hide();
4  var choice=function(me){
5    var types=$('[name=type]:checked').map(function(){
6      return $(this).val();
7    }).get();
8    $('.js_target').hide().filter(function(){
9      return $(this).data('type').some(function(x){
10        return $.inArray(x,types)>=0;
11      });
12    }).show();
13  }
14  $('[name=type],[name=object]').on('change',choice);
15});
16</script>
17
18<div class="js_conditions" data-type="type">
19    <div>項目1</div>
20    <div>
21        <ul>
22            <li><input id="type-hotel" type="checkbox" name="type" value="hotel"><label for="type-hotel">ホテル</label></li>
23            <li><input id="type-restaurant" type="checkbox" name="type" value="restaurant"><label for="type-restaurant">レストラン</label></li>
24            <li><input id="type-spot" type="checkbox" name="type" value="spot"><label for="type-spot">観光地</label></li>
25        </ul>
26    </div>
27</div>
28
29<div class="js_conditions" data-type="object">
30    <div>項目2</div>
31    <div>
32        <ul>
33            <li><input id="object-resort" type="checkbox" name="object" value="resort"><label for="object-resort">リゾートホテル</label></li>
34            <li><input id="object-hiclass" type="checkbox" name="object" value="hiclass"><label for="object-hiclass">高級ホテル</label></li>
35            <li><input id="object-guesthouse" type="checkbox" name="object" value="guesthouse"><label for="object-guesthouse">民宿</label></li>
36        </ul>
37    </div>
38</div>
39
40<div class="js_conditions" data-type="period">
41    <div>項目3</div>
42    <div>
43        <ul>
44            <li><input id="period-100" type="checkbox" name="period" value="100"><label for="period-100">100</label></li>
45            <li><input id="period-200" type="checkbox" name="period" value="200"><label for="period-200">200</label></li>
46            <li><input id="period-300" type="checkbox" name="period" value="300"><label for="period-300">300</label></li>
47        </ul>
48
49    </div>
50</div>
51<div>
52    <ul>
53        <li class="js_target" data-type='["hotel","restaurant"]' data-object="resort"   data-period="200">ホテルハワイ・ハワイアンレストラン</li>
54        <li class="js_target" data-type='["hotel"]'              data-object="hiclass"  data-period="300">五十嵐ホテル</li>
55        <li class="js_target" data-type='["hotel"]'              data-object="hotel"    data-period="100">やどや</li>
56        <li class="js_target" data-type='["restaurant"]'         data-object="resort"   data-period="200">海鮮レストラン</li>
57        <li class="js_target" data-type='["spot"]'               data-object="hiclass"  data-period="300">水族館</li>
58    </ul>
59
60</div>