質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

1641閲覧

JavaScriptで絞り込み検索(data属性を複数設定したい)

abaddon

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/01/23 03:42

編集2023/01/23 15:44

※前回の質問が不適切だったため質問の内容を書き直しました。
前回の質問と内容が少し異なるのですが再度知恵をお貸いただけると有難いです。
(編集前の回答やコメントをくださった方有難うございました。質問の仕方が悪く申し訳ございません)

前提

お世話になります。
現在、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");

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/01/23 03:48

検索前のデータがどういうものなのか明確にしてください
miyabi_takatsuk

2023/01/23 04:28

select要素だと、複数の値を設定することは難しいかと思われます。 (selectを複数設置すればできる) input[typn=checkbox]にて設置すべきかと思います。
abaddon

2023/01/23 05:35

お二方ともコメント有難うございます。 select要素だと、複数の値を設定することは難しいのですね。 また、質問の仕方が悪かったこともあり内容を質問の再編集いたしました。 質問の内容自体が少し変わってしまっているのですがもし助言などありましたら宜しくお願いいたします。
guest

回答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
yambejp

総合スコア114721

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

abaddon

2023/01/23 05:37

回答有難うございます。 質問の仕方が悪かったこともあり、やりたいことを整理したうえで内容を質問の再編集いたしました。 質問の内容自体が少し変わってしまっているのですがもし助言などありましたら宜しくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問