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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1902閲覧

checkboxを使った絞り込み検索 or検索からand検索に変更

hrnkmhmdmyk

総合スコア3

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/03/27 02:08

実現したいこと

checkboxを使った絞り込み機能でor検索からand検索に修正する。

  • and検索
  • 複数の要素を持つ

前提

html、css、JavaScript(jQuery)を使用し、
複数タグを持つ要素の、or検索での絞り込み機能を実装しています。
それをand検索に変更したいです。
or検索はこちらのコードをお借りしています。
https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
[3. 配列を使ってリスト側に複数の値を設定できるようにする]

発生している問題

上記コードを解体して考えているのですが、
どこがor検索としてのコードなのか、
and検索にするにはどういったコードを埋め込めばいいのか、
一部解読できない箇所 等があり、完成させることができません。

該当のソースコード

html

1 <form> 2 <div class="search-box"> 3 <span class="search-box_label">Tag:</span> 4 <input type="checkbox" name="tag" value="tag1">tag1 5 <input type="checkbox" name="tag" value="tag2">tag2 6 <input type="checkbox" name="tag" value="tag3">tag3 7 <input type="checkbox" name="tag" value="tag4">tag4 8 <input type="checkbox" name="tag" value="tag5">tag5 9 </div> 10 </form> 11 <ul class="list"> 12 <li class="list_item" data-tag='["tag1", "tag2"]'> 13 Tag: tag1,tag2 14 </li> 15 <li class="list_item" data-tag='["tag3", "tag4"]'> 16 Tag: tag3,tag4 17 </li> 18 <li class="list_item" data-tag='tag5'> 19 Tag: tag5 20 </li> 21 </ul> 22 <script src="https://code.jquery.com/jquery-3.6.4.min.js" 23 integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

css

1 .is-hide { 2 display: none; 3 }

JavaScript

1 var searchBox = '.search-box'; // 絞り込む項目を選択するエリア 2 var listItem = '.list_item'; // 絞り込み対象のアイテム 3 var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 4 5 $(function () { 6 // 絞り込み項目を変更した時、「search_filter」の処理を行う 7 $(document).on('change', searchBox + ' input', function () { 8 search_filter(); 9 }); 10 }); 11 12 /** 13 * リストの絞り込みを行う 14 */ 15 // 「search_filter」の処理 16 function search_filter() { 17 18 // 非表示状態を解除 19 // .is-hideのクラスを外す 20 $(listItem).removeClass(hideClass); 21 22 // ループ処理 23 // 初期値:0 24 // 条件式:iが.search-boxの数以下なら 25 // 増減式:+1 26 for (var i = 0; i < $(searchBox).length; i++) { 27 28 // .search-boxのi番目のinput属性の中のnameを[name]とおく 29 var name = $(searchBox).eq(i).find('input').attr('name'); 30 31 // 選択されている[name]を[searchData]とおく 32 var searchData = get_selected_input_items(name); 33 34 // [searchData]の数が0、もしくは[searchData]が0番目でvalueが""の時は飛ばす 35 if (searchData.length === 0 || searchData[0] === '') { 36 37 // 残りの繰り返し処理をスキップして次へ 38 continue; 39 } 40 // リスト内の各アイテムをチェック 41 // ループ処理 42 // 初期値:0 43 // 条件式:jが.list_itemの数以下なら 44 // 増減式:+1 45 for (var j = 0; j < $(listItem).length; j++) { 46 47 // アイテムに設定している項目を取得 48 // .list_itemのj番目のxxxxx 49 var itemData = get_setting_values_in_item($(listItem).eq(j), name); 50 51 // 絞り込み対象かどうかを調べる 52 // .list_itemのj番目のxxxxx と 選択されている[name] 53 var check = array_match_check(itemData, searchData); 54 55 // もし偽なら、.list_itemのj番目に.is-hideのクラスを加える 56 if (!check) { 57 $(listItem).eq(j).addClass(hideClass); 58 } 59 } 60 } 61 } 62 63 /** 64 * inputで選択されている値の一覧を取得する 65 * @param {String} name 対象にするinputのname属性の値 66 * @return {Array} 選択されているinputのvalue属性の値 67 */ 68 function get_selected_input_items(name) { 69 var searchData = []; 70 // チェックされているnameにループ処理 71 $('[name=' + name + ']:checked').each(function () { 72 // 選択されているnameにvalueの値を追加 73 searchData.push($(this).val()); 74 }); 75 return searchData; 76 } 77 78 /** 79 * リスト内のアイテムに設定している値の一覧を取得する 80 * @param {Object} target 対象にするアイテムのjQueryオブジェクト 81 * @param {String} data 対象にするアイテムのdata属性の名前 82 * @return {Array} 対象にするアイテムのdata属性の値 83 */ 84 function get_setting_values_in_item(target, data) { 85 // ターゲットのデータ属性を[itemData]とおく 86 var itemData = target.data(data); 87 // [itemData]が配列かどうかチェックして偽なら 88 if (!Array.isArray(itemData)) { 89 // itemDataとする 90 itemData = [itemData]; 91 } 92 return itemData; 93 } 94 95 /** 96 * 2つの配列内で一致する文字列があるかどうかを調べる 97 * @param {Array} arr1 調べる配列1 98 * @param {Array} arr2 調べる配列2 99 * @return {Boolean} 一致する値があるかどうか 100 */ 101 function array_match_check(arr1, arr2) { 102 // 絞り込み対象かどうかを調べる 103 var arrCheck = false; 104 105 // ループ処理 106 // 初期値:0 107 // 条件式:iが配列1の数以下なら 108 // 増減式:+1 109 for (var i = 0; i < arr1.length; i++) { 110 // 配列2に配列1のiが含まれていたら 111 if (arr2.indexOf(arr1[i]) >= 0) { 112 arrCheck = true; 113 break; 114 } 115 } 116 return arrCheck; 117 }

社内で聞ける人もおらず、初歩的な質問なのも承知しております。
調べてもわからずでお力お借りできれば幸いです。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

1

ベストアンサー

tag5を指定している箇所のようにdata-tagが配列とプリミティブが混ざっていると判定が煩雑になります
今回のケースだと値がひとつしかなくても配列風に書くべきでしょう

また想定するAND検索とはなにかによります。data-tagの全ての要素がname=tagでチェックされているならという命題であれば以下の通り

javascript

1 2<style> 3.is-hide {display: none;} 4</style> 5<script> 6window.addEventListener('DOMContentLoaded', ()=>{ 7 document.querySelectorAll('.list_item').forEach(x=>x.classList.add('is-hide')); 8}); 9document.addEventListener('change', ()=>{ 10 const tags=[...document.querySelectorAll('[name="tag"]:checked')].map(x=>x.value); 11 document.querySelectorAll('.list_item[data-tag]').forEach(x=>{ 12 let tag; 13 try{ 14 tag=JSON.parse(x.dataset.tag); 15 }catch(e){ 16 tag=[x.dataset.tag]; 17 } 18 x.classList.toggle('is-hide',!tag.every(x=>tags.includes(x))); 19 }); 20}); 21</script> 22<form> 23 <div class="search-box"> 24 <span class="search-box_label">Tag:</span> 25 <label><input type="checkbox" name="tag" value="tag1">tag1</label> 26 <label><input type="checkbox" name="tag" value="tag2">tag2</label> 27 <label><input type="checkbox" name="tag" value="tag3">tag3</label> 28 <label><input type="checkbox" name="tag" value="tag4">tag4</label> 29 <label><input type="checkbox" name="tag" value="tag5">tag5</label> 30 </div> 31 </form> 32 <ul class="list"> 33 <li class="list_item" data-tag='["tag1"]'> 34 Tag: tag1 35 </li> 36 <li class="list_item" data-tag='["tag1", "tag2"]'> 37 Tag: tag1,tag2 38 </li> 39 <li class="list_item" data-tag='["tag1","tag3"]'> 40 Tag: tag1,tag3 41 </li> 42 <li class="list_item" data-tag='["tag3", "tag4"]'> 43 Tag: tag3,tag4 44 </li> 45 <li class="list_item" data-tag='tag5'> 46 Tag: tag5 47 </li> 48 </ul>

投稿2023/03/27 03:44

編集2023/03/27 03:51
yambejp

総合スコア114339

hrnkmhmdmyk👍を押しています

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

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

hrnkmhmdmyk

2023/03/28 11:05

早々にご回答いただきありがとうございます! 想定するAND検索は、 例えばtag1、2にチェックを入れたら、 tag1と2、両方を持つものだけに絞り込まれる です。 ご教示いただきましたコード、読み解いて実装していこうと思います。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。