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を全て外したいです。
<試したこと>
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属性の料理を非表示にするという
風に書きました。
初心者なので調べながらやっていますが、そろそろ分からず質問してしまいました。
お手数ですが、わかる方がいたらご教授していただけると幸いです。
回答1件
あなたの回答
tips
プレビュー