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

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

191閲覧

JQueryを使用した絞込み検索機能

hiroki88

総合スコア66

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グッド

2クリップ

投稿2019/03/20 07:00

HTML

1<div id="box"> 2 <form id="form"> 3 <h1>食べたいものを選ぶ</h1> 4 <div id="number1"> 5 <select name="food" id="seachFood"> 6 <option class="seach" value="なんでも" data-food="">なんでもいい</option> 7 <option class="seach" value="肉" data-food="meet">肉系</option> 8 <option class="seach" value="魚介" data-food="fish">魚介系</option> 9 <option class="seach" value="野菜" data-food="vegi">野菜系</option> 10 </select> 11 </div> 12 <div id="number2"> 13 <input type="checkbox" name="submenu" class="submenu" data-subb="" 14checked="checked" /> 15指定しない 16 <input type="checkbox" name="submenu" class="submenu" data-subb="drink" /> 17飲み放題 18 <input type="checkbox" name="submenu" class="submenu" data-subb="slice" /> 19割引 20 <input type="checkbox" name="submenu" class="submenu" data-subb="mogmog" /> 21食べ放題 22 </div> 23 <input type="button" value="検索する" id="button" /> 24 </form> 25 <div id="eat"> 26 <ul id="eats"> 27 <li class="list" data-eat="meet" data-sub="drink">焼肉(飲み放題)</li> 28 <li class="list" data-eat="meet" data-sub="slice">シュラスコ(割引)</li> 29 <li class="list" data-eat="meet" data-sub="mogmog">肉寿司(食べ放題)</li> 30 <li class="list" data-eat="fish" data-sub="drink">お寿司(飲み放題)</li> 31 <li class="list" data-eat="fish" data-sub="slice">回転寿司(割引)</li> 32 <li class="list" data-eat="fish" data-sub="mogmog">高級鮨(食べ放題)</li> 33 <li class="list" data-eat="vegi" data-sub="drink">野菜天婦羅(飲み放題)</li> 34 <li class="list" data-eat="vegi" data-sub="slice">野菜揚げ(割引)</li> 35 <li class="list" data-eat="vegi" data-sub="mogmog">野菜盛り(食べ放題)</li> 36 </ul> 37 </div> 38</div>

CSS

1*{ 2 margin:0; 3 padding:0; 4 list-style-type:none; 5} 6body{ 7 background-color:#C33; 8 width:100%; 9 height:100vh; 10 color:#FFF; 11 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 12 "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 13} 14#box{ 15 width:800px; 16 margin:0 auto; 17 text-align:center; 18} 19#number1{ 20 margin:20px 0; 21 font-size:30px; 22} 23#eats{ 24 width:800px; 25 margin:0 auto; 26 font-size:20px; 27} 28.list{ 29 padding-top:10px; 30} 31.active{ 32 display:inline-block; 33} 34#number2{ 35 margin:10px 0; 36 font-size:18px; 37} 38#button{ 39 margin-bottom:20px; 40} 41.hide{ 42 display:none; 43}

jQuery

1jQuery(document).ready(function($){ 2 3 $('.submenu').change(function(){ 4 if($('.submenu:nth-child(2)').prop('checked')|| 5$('.submenu:nth-child(3)').prop('checked')|| 6$('.submenu:nth-child(4)').prop('checked')){ 7 $('.submenu:nth-child(1)').attr('checked',false); 8 }; 9 if($('.submenu:nth-child(1)').prop('checked')){ 10 $('.submenu:nth-child(n+2):nth-child(-n+4)').attr('checked',false); 11 }; 12 13 $('#button').click(function(){ 14 for(var i = 0;i < $('.submenu').length;i++){ 15 if($('.submenu').eq(i).prop('checked') == true){ 16 var check = $('.submenu').eq(i).data('subb'); 17 }; 18 }; 19 20 for(var i = 0;i < $('.list').length;i++){ 21 var listSub = $('.list').eq(i).data('sub'); 22 if(listEat !== check){ 23 $('.list').eq(i).addClass('hide'); 24 }; 25 }; 26 }); 27}); 28**//checkbox選択** 29 30 $('#seachFood').change(function(){ 31 $('#button').click(function(){ 32 33 var food = $('#seachFood option:selected').data('food'); 34 35 $('.list').removeClass('hide'); 36 37 if(food === ''){ 38 return; 39 }; 40 41 for(var i = 0;i < $('.list').length;i++){ 42 var listEat = $('.list').eq(i).data('eat'); 43 if(listEat !== food){ 44 $('.list').eq(i).addClass('hide'); 45 }; 46 }; 47 }); 48 }); 49**//select選択** 50});

【1つ目のやりたい事】
checkboxで作成した(ここでは見ずらいのでname,class,data属性は省略します)
4つのcheckboxのうち、1つめのcheckbox(指定しない)は最初からcheckedの状態に
なっています。
2~4つ目のcheckbox(飲み放題,割引,食べ放題)のうち1つでもcheckedになれば
1つめのcheckbox(指定しない)のcheckが外れます。ここまではできました。

その後、2~4つ目のcheckbox(飲み放題,割引,食べ放題)のうち1つでもcheckedになっている
状態で1つめのcheckbox(指定しない)をcheckedにした時に2~4つ目のcheckbox(飲み放題,割引,食べ放題)のckeckを全て外したいです。

<div id="number2"> <input type="checkbox" />指定しない <input type="checkbox" />飲み放題 <input type="checkbox" />割引 <input type="checkbox" />食べ放題 </div>

<試したこと>
if($('.submenu:nth-child(2)').prop('checked')||$('.submenu:nth-child(3)').prop('checked')||$('.submenu:nth-child(4)').prop('checked')){
$('.submenu:nth-child(1)').attr('checked',false);
};
このコードで1つめのcheckbox(指定しない)のcheckが外すことができました。

if($('.submenu:nth-child(1)').prop('checked')){
$('.submenu:nth-child(n+2):nth-child(-n+4)').attr('checked',false);
};
なので上記のコードと同じようにしましたが2~4つ目のcheckbox(飲み放題,割引,食べ放題)のckeckを外すことができませんでした。.attrを.propに変えるとcheckを外せますが二度とcheckできなくなってしまいました。

【2つ目のやりたい事】
selectで項目を選択しbuttonをクリックすると、下記の料理からdata属性のmeet,fish,vegiの3種類で絞込み、対象外は非表示にすることができたのですが、さらにそこから詳細な絞込みをできるようにしたいです。data-subで指定したdrink,slice,mogmogの3種類で絞込みをしたいのですが上手くいきません。
for(var i = 0;i < $('.submenu').length;i++){
if($('.submenu').eq(i).prop('checked') == true){
var check = $('.submenu').eq(i).data('subb');
};
};

for(var i = 0;i < $('.list').length;i++){
var listSub = $('.list').eq(i).data('sub');
if(listEat !== check){
$('.list').eq(i).addClass('hide');
};
};
上記のコードでfor文を使いif文でcheckedになっているdata属性を代入した後に
代入した値が下記のdata属性と違った場合、下記の対象外のdata属性の料理を非表示にするという
風に書きました。

<ul id="eats"> <li class="list" data-eat="meet" data-sub="drink">焼肉(飲み放題)</li> <li class="list" data-eat="meet" data-sub="slice">シュラスコ(割引)</li> <li class="list" data-eat="meet" data-sub="mogmog">肉寿司(食べ放題)</li> <li class="list" data-eat="fish" data-sub="drink">お寿司(飲み放題)</li> <li class="list" data-eat="fish" data-sub="slice">回転寿司(割引)</li> <li class="list" data-eat="fish" data-sub="mogmog">高級鮨(食べ放題)</li> <li class="list" data-eat="vegi" data-sub="drink">野菜天婦羅(飲み放題)</li> <li class="list" data-eat="vegi" data-sub="slice">野菜揚げ(割引)</li> <li class="list" data-eat="vegi" data-sub="mogmog">野菜盛り(食べ放題)</li> </ul>

初心者なので調べながらやっていますが、そろそろ分からず質問してしまいました。
お手数ですが、わかる方がいたらご教授していただけると幸いです。

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

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

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

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

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

m.ts10806

2019/03/20 07:08

インデントはきちんと揃えられたほうが良いです。 インデントがぐちゃぐちゃなコードはバグの温床ですし、デバッグもしづらくなります。 質問に提示するためにコードを揃えるではなく、自身のコードを揃えたものを質問にご提示ください。 ※できればコードフォーマット機能のついたエディタか、Web上のコードフォーマットサービスを利用してください
m.ts10806

2019/03/20 07:09

>初心者なので調べながらやっています 「初心者アイコン」をつけておいてください。 「初心者」というのはあくまで質問者さんの段階であり、要件とはまた別の概念ですので、基本的に質問タイトルや本文にふくめる必要はありません。
hiroki88

2019/03/21 05:09

ご指摘ありがとうございます。 テラテイル自体上手く扱えていませんので初心者アイコンなど知りませんでした。 やりたい事の部分で記載したコードはそもそもtabが使えずインデントできませんでした。 <code>で記載したコードはここで質問する前からインデントをしておりました。
m.ts10806

2019/03/21 05:12

質問は編集できますので適宜ご対応いただけたらと。 code内のみ行頭のスペースやタブがそのまま表示されます。
guest

回答1

0

ベストアンサー

飲み放題と割引と食べ放題は競合しないので書き方がちょっと違います
実際のところ肉と魚と野菜も競合しないと思いますがこれはそのままにしときます

javascript

1<script> 2$(function(){ 3 $('#seachFood,.submenu').on('change',function(){ 4 var idx=$('.submenu').index(this); 5 if(idx==0 && $(this).prop('checked')){ 6 $('.submenu:not(:eq(0))').prop('checked',false); 7 }else if(idx>0 && $(this).prop('checked')){ 8 $('.submenu:eq(0)').prop('checked',false); 9 } 10 if($('.submenu:checked').length==0){ 11 $('.submenu:eq(0)').prop('checked',true); 12 } 13 $('.list').each(function(){ 14 $(this).toggle( 15 (($('[data-sub="drink"]').is(':checked') && $(this).data("drink")=="1" || 16 $('[data-sub="slice"]').is(':checked') && $(this).data("slice")=="1" || 17 $('[data-sub="mogmog"]').is(':checked') && $(this).data("mogmog")=="1" ) 18 || $('[data-sub="all"]').is(':checked')) && 19 (($('[data-food="meat"]').is(':selected') && $(this).data("eat")=="meat" || 20 $('[data-food="fish"]').is(':selected') && $(this).data("eat")=="fish" || 21 $('[data-food="vegi"]').is(':selected') && $(this).data("eat")=="vegi" ) 22 || $('[data-food="all"]').is(':selected')) 23 ) ; 24 }); 25 }); 26}); 27</script> 28<div id="box"> 29 <form id="form"> 30 <h1>食べたいものを選ぶ</h1> 31 <div id="number1"> 32 <select name="food" id="seachFood"> 33 <option class="seach" value="なんでも" data-food="all">なんでもいい</option> 34 <option class="seach" value="肉" data-food="meat">肉系</option> 35 <option class="seach" value="魚介" data-food="fish">魚介系</option> 36 <option class="seach" value="野菜" data-food="vegi">野菜系</option> 37 </select> 38 </div> 39 <div id="number2"> 40 <label><input type="checkbox" name="submenu" class="submenu" data-sub="all" checked="checked" />指定しない</label> 41 <label><input type="checkbox" name="submenu" class="submenu" data-sub="drink" />飲み放題</label> 42 <label><input type="checkbox" name="submenu" class="submenu" data-sub="slice" />割引</label> 43 <label><input type="checkbox" name="submenu" class="submenu" data-sub="mogmog" />食べ放題</label> 44 </div> 45 <input type="button" value="検索する" id="button" /> 46 </form> 47 <div id="eat"> 48 <ul id="eats"> 49 <li class="list" data-eat="meat" data-drink="1">焼肉(飲み放題)</li> 50 <li class="list" data-eat="meat" data-slice="1">シュラスコ(割引)</li> 51 <li class="list" data-eat="meat" data-mogmog="1">肉寿司(食べ放題)</li> 52 <li class="list" data-eat="fish" data-drink="1">お寿司(飲み放題)</li> 53 <li class="list" data-eat="fish" data-slice="1">回転寿司(割引)</li> 54 <li class="list" data-eat="fish" data-mogmog="1">高級鮨(食べ放題)</li> 55 <li class="list" data-eat="vegi" data-drink="1">野菜天婦羅(飲み放題)</li> 56 <li class="list" data-eat="vegi" data-slice="1">野菜揚げ(割引)</li> 57 <li class="list" data-eat="vegi" data-mogmog="1">野菜盛り(食べ放題)</li> 58 <li class="list" data-drink="1" data-slice="1" data-mogmog="1">飲み放題,割引,食べ放題</li> 59 <li class="list" data-drink="1" data-slice="1">飲み放題,割引</li> 60 <li class="list" data-drink="1" data-mogmog="1">飲み放題,食べ放題</li> 61 <li class="list" data-slice="1" data-mogmog="1">割引,食べ放題</li> 62 <li class="list" data-drink="1">飲み放題</li> 63 <li class="list" data-slice="1">割引</li> 64 <li class="list" data-mogmog="1">食べ放題</li> 65 </ul> 66 </div> 67</div>

投稿2019/03/20 11:30

編集2019/03/20 12:29
yambejp

総合スコア114572

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

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

yambejp

2019/03/20 11:31

競合しないデータはclassで処理したほうが楽かも
退会済みユーザー

退会済みユーザー

2019/03/20 12:57

条件式のor/and重ねすぎ。バグのはは
hiroki88

2019/03/21 05:11

yambejp様 jsの知識足らずでお手数おかけしてすみません。 こちらのコードを自分なりに理解しながら、参考にさせて頂きたいと思います。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問