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

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

ただいまの
回答率

87.60%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 2
  • VIEW 543

score 59

<div id="box">
 <form id="form">
  <h1>食べたいものを選ぶ</h1>
  <div id="number1">
   <select name="food" id="seachFood">
    <option class="seach" value="なんでも" data-food="">なんでもいい</option>
    <option class="seach" value="肉" data-food="meet">肉系</option>
    <option class="seach" value="魚介" data-food="fish">魚介系</option>
    <option class="seach" value="野菜" data-food="vegi">野菜系</option>
   </select>
  </div> 
  <div id="number2">
   <input type="checkbox" name="submenu" class="submenu" data-subb="" 
checked="checked" />
指定しない
   <input type="checkbox" name="submenu" class="submenu" data-subb="drink" />
飲み放題
   <input type="checkbox" name="submenu" class="submenu" data-subb="slice" />
割引
   <input type="checkbox" name="submenu" class="submenu" data-subb="mogmog" />
食べ放題
  </div>
  <input type="button" value="検索する" id="button" />
 </form>
 <div id="eat">
  <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>
 </div>
</div>
*{
 margin:0;
 padding:0;
 list-style-type:none;
}
body{
 background-color:#C33;
 width:100%;
 height:100vh;
 color:#FFF;
 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
 "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}
#box{
 width:800px;
 margin:0 auto;
 text-align:center;
}
#number1{
 margin:20px 0;
 font-size:30px;
}
#eats{
 width:800px;
 margin:0 auto;
 font-size:20px;
}
.list{
 padding-top:10px;
}
.active{
 display:inline-block;
}
#number2{
 margin:10px 0;
 font-size:18px;
}
#button{
 margin-bottom:20px;
}
.hide{
 display:none;
}
jQuery(document).ready(function($){

 $('.submenu').change(function(){
  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);
  };
  if($('.submenu:nth-child(1)').prop('checked')){
   $('.submenu:nth-child(n+2):nth-child(-n+4)').attr('checked',false);
  };

  $('#button').click(function(){
   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');
    };
   };
  });
});
**//checkbox選択**

 $('#seachFood').change(function(){
  $('#button').click(function(){    

   var food = $('#seachFood option:selected').data('food');

   $('.list').removeClass('hide');

   if(food === ''){
    return;
   };

   for(var i = 0;i < $('.list').length;i++){
    var listEat = $('.list').eq(i).data('eat');
    if(listEat !== food){
     $('.list').eq(i).addClass('hide');
    };
   };
  });
 });
**//select選択**
});


【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>

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/03/20 16:08

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

    キャンセル

  • m.ts10806

    2019/03/20 16:09

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

    キャンセル

  • hiroki88

    2019/03/21 14:09

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

    キャンセル

  • m.ts10806

    2019/03/21 14:12

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

    キャンセル

回答 1

checkベストアンサー

+1

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

<script>
$(function(){
  $('#seachFood,.submenu').on('change',function(){
    var idx=$('.submenu').index(this);
    if(idx==0 && $(this).prop('checked')){
      $('.submenu:not(:eq(0))').prop('checked',false);
    }else if(idx>0 && $(this).prop('checked')){
      $('.submenu:eq(0)').prop('checked',false);
    }
    if($('.submenu:checked').length==0){
      $('.submenu:eq(0)').prop('checked',true);
    }
    $('.list').each(function(){
      $(this).toggle(
        (($('[data-sub="drink"]').is(':checked') && $(this).data("drink")=="1" ||
         $('[data-sub="slice"]').is(':checked') && $(this).data("slice")=="1" ||
         $('[data-sub="mogmog"]').is(':checked') && $(this).data("mogmog")=="1" )
         || $('[data-sub="all"]').is(':checked')) &&
        (($('[data-food="meat"]').is(':selected') && $(this).data("eat")=="meat" ||
         $('[data-food="fish"]').is(':selected') && $(this).data("eat")=="fish" ||
         $('[data-food="vegi"]').is(':selected') && $(this).data("eat")=="vegi" )
        || $('[data-food="all"]').is(':selected'))
        ) ;
    });
  });
});
</script>
<div id="box">
 <form id="form">
  <h1>食べたいものを選ぶ</h1>
  <div id="number1">
   <select name="food" id="seachFood">
    <option class="seach" value="なんでも" data-food="all">なんでもいい</option>
    <option class="seach" value="肉" data-food="meat">肉系</option>
    <option class="seach" value="魚介" data-food="fish">魚介系</option>
    <option class="seach" value="野菜" data-food="vegi">野菜系</option>
   </select>
  </div> 
  <div id="number2">
   <label><input type="checkbox" name="submenu" class="submenu" data-sub="all" checked="checked" />指定しない</label>
   <label><input type="checkbox" name="submenu" class="submenu" data-sub="drink" />飲み放題</label>
   <label><input type="checkbox" name="submenu" class="submenu" data-sub="slice" />割引</label>
   <label><input type="checkbox" name="submenu" class="submenu" data-sub="mogmog" />食べ放題</label>
  </div>
  <input type="button" value="検索する" id="button" />
 </form>
 <div id="eat">
  <ul id="eats">
   <li class="list" data-eat="meat" data-drink="1">焼肉(飲み放題)</li>
   <li class="list" data-eat="meat" data-slice="1">シュラスコ(割引)</li>
   <li class="list" data-eat="meat" data-mogmog="1">肉寿司(食べ放題)</li>
   <li class="list" data-eat="fish" data-drink="1">お寿司(飲み放題)</li>
   <li class="list" data-eat="fish" data-slice="1">回転寿司(割引)</li>
   <li class="list" data-eat="fish" data-mogmog="1">高級鮨(食べ放題)</li>
   <li class="list" data-eat="vegi" data-drink="1">野菜天婦羅(飲み放題)</li>
   <li class="list" data-eat="vegi" data-slice="1">野菜揚げ(割引)</li>
   <li class="list" data-eat="vegi" data-mogmog="1">野菜盛り(食べ放題)</li>
   <li class="list" data-drink="1" data-slice="1" data-mogmog="1">飲み放題,割引,食べ放題</li>
   <li class="list" data-drink="1" data-slice="1">飲み放題,割引</li>
   <li class="list" data-drink="1" data-mogmog="1">飲み放題,食べ放題</li>
   <li class="list" data-slice="1" data-mogmog="1">割引,食べ放題</li>
   <li class="list" data-drink="1">飲み放題</li>
   <li class="list" data-slice="1">割引</li>
   <li class="list" data-mogmog="1">食べ放題</li>
  </ul>
 </div>
</div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/20 20:31

    競合しないデータはclassで処理したほうが楽かも

    キャンセル

  • 2019/03/20 21:57

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

    キャンセル

  • 2019/03/21 14:11

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

    キャンセル

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

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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