Q&A
検索前のデータがどういうものなのか明確にしてください
※前回の質問が不適切だったため質問の内容を書き直しました。
前回の質問と内容が少し異なるのですが再度知恵をお貸いただけると有難いです。
（編集前の回答やコメントをくださった方有難うございました。質問の仕方が悪く申し訳ございません）
前提
お世話になります。
現在、JavaScriptで絞り込み検索の機能をもったページの作成をしています。
実現したいこと
「selectでtype01とtype02を選択した場合にアイテム04を表示させたい」
アイテム04にはtype01とtype02の2つのdata-typeを設定したいのですが、現在のJavaScriptのコードを流用して可能なのでしょうか。
（アイテム04のdivに「data-type="type01 type02"」と書いても絞り込み結果には表示されませんでした。）
該当のソースコード
html
1<div class="contents"> 2 3 <div class="filter-area"> 4 <div class="wrap"> 5 <div class="box"> 6 <p>選択項目</p> 7 <div class="select"> 8 <select class="form-select js-filter" name="type"> 9 <option value="all">全て</option> 10 <option value="type01">タイプ01</option> 11 <option value="type02">タイプ02</option> 12 <option value="type03">タイプ03</option> 13 </select> 14 </div> 15 </div> 16 </div> 17 </div> 18 <!-- /filter-area --> 19 20 <div class="item-area"> 21 <div class="wrap"> 22 <!------ 結果メッセージ ------> 23 <p>検索結果：<span class="js-filter-msg"></span></p> 24 <!------ アイテム一覧 ------> 25 <div class="js-filter-items"> 26 27 <div class="js-filter-item" data-type="type01"> 28 アイテム01 29 </div> 30 <div class="js-filter-item" data-type="type02"> 31 アイテム02 32 </div> 33 <div class="js-filter-item" data-type="type03"> 34 アイテム03 35 </div> 36 <div class="js-filter-item" data-type="type01 type02"> 37 アイテム04 38 </div> 39 </div> 40 </div> 41 </div> 42 <!-- /item-area --> 43 44</div> 45<!-- /contents -->
css
1 .d-none { 2 visibility: hidden; 3 display: none; 4 }
JavaScript
1function multi_filter(h, t, s, r = "") { 2 let hidden = h; 3 let targets = document.querySelectorAll(t); 4 let selects = document.querySelectorAll(s); 5 let result = document.querySelector(r); 6 let result_msg = ""; 7 8 9 if (selects) { 10 //****** for all select ****** 11 for (let i of selects) { 12 i.addEventListener("change", () => { 13 let hidden_num = 0; 14 15 //*** for each target *** 16 for (let ii of targets) { 17 //*** delete hidden class *** 18 ii.classList.remove(hidden); 19 //*** check target every select *** 20 for (let iii of selects) { 21 //*** get select name value / option value / target data attribute *** 22 let value = iii.value; 23 let name = iii.getAttribute("name"); 24 let item_data = ii.getAttribute("data-" + name); 25 //*** set hidden class *** 26 // exist value & except all & item_data not match & no hidden class 27 if (value && value !== "all" && value !== item_data && !ii.classList.contains(hidden)) { 28 ii.classList.add(hidden); 29 hidden_num++; 30 } 31 } 32 } 33 34 //****** result message ****** 35 if (result) { 36 //*** not found *** 37 if (hidden_num === targets.length) { 38 result_msg = "No such thing.."; 39 } 40 //*** found *** 41 else { 42 let result_num = targets.length - hidden_num; 43 result_msg = result_num + " results"; 44 } 45 result.innerText = result_msg; 46 } 47 48 }); 49 } 50 } 51} 52 53//*** call *** 54multi_filter("d-none", ".js-filter-item", ".js-filter", ".js-filter-msg");
select要素だと、複数の値を設定することは難しいかと思われます。
（selectを複数設置すればできる）
input[typn=checkbox]にて設置すべきかと思います。
お二方ともコメント有難うございます。
select要素だと、複数の値を設定することは難しいのですね。
また、質問の仕方が悪かったこともあり内容を質問の再編集いたしました。
質問の内容自体が少し変わってしまっているのですがもし助言などありましたら宜しくお願いいたします。
回答1件
0
"red yellow"はあくまで"red yellow"という一つの値にすぎません
単純に「red」か「yellow」にヒットするデータを探せばいいだけでは？
追記
ざっくりこんな感じでデータをもってみては？
javascript
1<style> 2.hide{display:none;} 3</style> 4<script> 5window.addEventListener('DOMContentLoaded', ()=>{ 6 document.querySelector('[name="type"]').addEventListener('change',e=>{ 7 const v=e.target.value; 8 document.querySelectorAll('[data-type]').forEach(x=>{ 9 x.classList.toggle('hide',v!=="all" && !JSON.parse(x.dataset.type).includes(Number(v))); 10 }); 11 }); 12}); 13</script> 14<div class="contents"> 15 <div class="filter-area"> 16 <div class="wrap"> 17 <div class="box"> 18 <p>選択項目</p> 19 <div class="select"> 20 <select class="form-select js-filter" name="type"> 21 <option value="all">全て</option> 22 <option value="1">タイプ01</option> 23 <option value="2">タイプ02</option> 24 <option value="3">タイプ03</option> 25 </select> 26 </div> 27 </div> 28 </div> 29 </div> 30 <!-- /filter-area --> 31 <div class="item-area"> 32 <div class="wrap"> 33 <!------ 結果メッセージ ------> 34 <p>検索結果：<span class="js-filter-msg"></span></p> 35 <!------ アイテム一覧 ------> 36 <div class="js-filter-items"> 37 <div class="js-filter-item" data-type="[1]"> 38 アイテム01 39 </div> 40 <div class="js-filter-item" data-type="[2]"> 41 アイテム02 42 </div> 43 <div class="js-filter-item" data-type="[3]"> 44 アイテム03 45 </div> 46 <div class="js-filter-item" data-type="[1,2]"> 47 アイテム04 48 </div> 49 </div> 50 </div> 51 </div> 52 <!-- /item-area --> 53</div>
投稿2023/01/23 03:47
編集2023/01/23 06:44総合スコア109992
回答へのコメント
回答有難うございます。
質問の仕方が悪かったこともあり、やりたいことを整理したうえで内容を質問の再編集いたしました。
質問の内容自体が少し変わってしまっているのですがもし助言などありましたら宜しくお願いいたします。
