Q&A
実現したいこと
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 }
社内で聞ける人もおらず、初歩的な質問なのも承知しております。
調べてもわからずでお力お借りできれば幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/28 11:05