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

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

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

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

JavaScript

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

jQuery

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

Q&A

解決済

1回答

1908閲覧

複数の条件でリスト項目の絞り込みをしたい

mariko76

総合スコア22

HTML5

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/07/15 07:54

リスト項目が多い為、2つの条件(プルダウン)で絞り込みをしたいです。
当初条件が1つ(地域のみ)だった為、こちらのteratailにお世話になり完成できたのですが、条件が増えてしまったのでさらにカスタマイズが必要となってしまいました。

▼テストページ
http://trip-paris.jp/test/

中身はこのようなソースになっています。

HTML

<select name="area" class="js-filter-form list_checkbox"> <option value="">地域</option> <option value="tokyo">東京都</option> <option value="kanagawa">神奈川県</option> <option value="saitama">埼玉県</option> <option value="chiba">千葉県</option> </select> <select name="category" class="js-filter-form list_checkbox"> <option value="">カテゴリ</option> <option value="restaurant">レストラン</option> <option value="izakaya">居酒屋</option> <option value="bar">バー</option> </select> <p class="js-filter-status text_status">全<span>件</span></p> <ul class="js-filter-items flex-wrap"> <li data-cat='{"tokyo","restaurant"}'>東京都 店舗01</li><!-- ***条件2つ用*** --> <li data-cat="tokyo">東京都 店舗02</li> <li data-cat="tokyo">東京都 店舗03</li> <li data-cat="tokyo">東京都 店舗04</li> <li data-cat="tokyo">東京都 店舗05</li> <li data-cat="tokyo">東京都 店舗06</li> <li data-cat="kanagawa">神奈川県 店舗01</li> <li data-cat="kanagawa">神奈川県 店舗02</li> <li data-cat="kanagawa">神奈川県 店舗03</li> <li data-cat="kanagawa">神奈川県 店舗04</li> <li data-cat="kanagawa">神奈川県 店舗05</li> <li data-cat="saitama">埼玉県 店舗01</li> <li data-cat="saitama">埼玉県 店舗02</li> <li data-cat="saitama">埼玉県 店舗03</li> <li data-cat="saitama">埼玉県 店舗04</li> <li data-cat="chiba">千葉県 店舗01</li> <li data-cat="chiba">千葉県 店舗02</li> <li data-cat="chiba">千葉県 店舗03</li> <li data-cat="chiba">千葉県 店舗04</li> </ul>

JS

itemElement: '>li:not(.hidden)', // 配下のli要素のうち.hiddenでないものを対象とする displayItemCount: 3, prevNextPageBtnMode: true, onePageOnlyDisplay: false, paginationClassName: 'pager', paginationInnerClassName: 'pager_inner', pageNumberClassName: 'pager_num', }); // プルダウン 絞り込み $(".js-filter-form").on("change", function(){ var selected = []; $(".js-filter-form :selected").each(function(){ selected.push($(this).val()); // push()は配列に値を追加します }); console.log(selected); var count = 0; $(".js-filter-items li").each(function(){ var cat = $(this).data("cat"); var is_exist = $.inArray( cat, selected ); // inArray()は配列内に値があるかどうかを調べます if (is_exist != -1) { $(this).removeClass("hidden"); count++; } else { $(this).addClass("hidden"); } $(this).css("display",""); // paginationがつけたdisplay要素を削除する }); if (count) { var str = "<span>全" + count + "件</span>"; } else { var str = "該当するアイテムはありません"; } $(".js-filter-status").html(str); $('.pager').remove(); // 既に存在するページャーの削除 $('.js-filter-items').pagination({ itemElement: '>li:not(.hidden)', // 配下のli要素のうち.hiddenでないものを対象とする displayItemCount: 3, prevNextPageBtnMode: true, onePageOnlyDisplay: false, paginationClassName: 'pager', paginationInnerClassName: 'pager_inner', pageNumberClassName: 'pager_num', }); });

条件2つにするためにやったこと

以下のようにdata-cat内にタグを追加しました。

<li data-cat='{"tokyo","restaurant"}'>東京都 店舗01</li><!-- ***条件2つ用*** -->

追加したところ、「東京」でさえも絞り込みができなくなってしまいました。
追記方法、間違っていますでしょうか。

もしjavascriptの方を書き換えなければいけないのであれば教えていただけると助かります。

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

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

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

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

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

guest

回答1

0

ベストアンサー

条件設定するなら配列に
1つでも複数のカテゴリ設定をするならほかも同様にする

追記

投稿2020/07/16 04:19

編集2020/07/16 06:13
yambejp

総合スコア114572

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

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

mariko76

2020/07/16 05:06

回答ありがとうございます! 同じように全てのリストに追加しましたが、やはりダメでした…。
yambejp

2020/07/16 05:16

やはりだめというか、仕様が変わったのでそれにあわせた プログラムの修正が必要です なにかわからない点ありますか?
mariko76

2020/07/16 05:36

すみません、プログラムの修正方法がわからないのですが、教えていただけますでしょうか。 私の知識が外部からソースを持ってきて、クラス名を変えたりして調整するくらいのレベルなのです。
yambejp

2020/07/16 05:39

ちなみに念の為・・・ 東京・レストランは、セレクトで条件を2つ設定したら 両方に合致するデータを残す(AND検索)ですよね? 東京またはレストラン(OR検索)ではなく・・・ その場合東京しかカテゴリ設定していない要素は レストランのせいで非表示になっていいんですよね?
yambejp

2020/07/16 06:14 編集

確認がめんどくさいので想像して追記しておきました 仕様が違う部分があれば指摘ください
mariko76

2020/07/16 09:01

ご丁寧に作っていただきありがとうございました。 無事に解決できました! ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問