※前回の質問が不適切だったため質問の内容を書き直しました。
前回の質問と内容が少し異なるのですが再度知恵をお貸いただけると有難いです。
(編集前の回答やコメントをくださった方有難うございました。質問の仕方が悪く申し訳ございません)
前提
お世話になります。
現在、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");
回答1件