質問: ### 前提・実現したいこと 画像を3つの条件(or検索)で表示したいと思っています。 2つの条件検索(#styleと#color)では問題なかったコードに、1つ条件(#size)を加えてみた所 まったく画像が検索(表示)されなくなってしまいました。 こちらのコードで間違っている点をお教え頂けませんでしょうか。 よろしくお願い致します。 ※最初にすべての画像が表示されていて、条件をクリックするとその画像が表示される様にしたいと思っています。 ### 該当のソースコード ``` シャツ スカート その他 ホワイト ピンク イエロー Lサイズ Mサイズ 〜 ``` ### 試したこと ``` $(function(){ $('.result section').show(); $('#style,#color,#size').find('input').on('click',function(){ $('.result section').hide(); $('#style [type=checkbox]:checked').each(function(){ var checkstyle=$(this).prop('id'); $('#color [type=checkbox]:checked').each(function(){ var checkcolor=$(this).prop('id'); $('#size [type=checkbox]:checked').each(function(){ var checksize=$(this).prop('id'); $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor) && $(this).hasClass(checksize);}).fadeIn(); }); }); if($('#style [type=checkbox]:checked').length==0){ $('#color [type=checkbox]:checked').each(function(){ var checkcolor=$(this).prop('id'); $('#size [type=checkbox]:checked').each(function(){ var checksize=$(this).prop('id'); $('.result section').filter(function(){return $(this).hasClass(checkcolor) && $(this).hasClass(checksize);}).fadeIn(); }); }); }; if($('#color [type=checkbox]:checked').length==0){ $('#style [type=checkbox]:checked').each(function(){ var checkstyle=$(this).prop('id'); $('#size [type=checkbox]:checked').each(function(){ var checksize=$(this).prop('id'); $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checksize);}).fadeIn(); }); }); }; if($('#size [type=checkbox]:checked').length==0){ $('#style [type=checkbox]:checked').each(function(){ var checkstyle=$(this).prop('id'); $('#color [type=checkbox]:checked').each(function(){ var checkcolor=$(this).prop('id'); $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor);}).fadeIn(); }); }); }; if($('#select [type=checkbox]:checked').length==0){ $('.result section').fadeIn(); }; }) }); function allselect() { $('.result section').fadeIn(); $('#select input[type="checkbox"]').prop('checked', false); }; ```
回答: 絞り込みの仕様をきちんと提示して下さい 仮に、class="skirt white m"のsectionは * skirtかつwhiteかつmのand検索なのか * skirtまたはwhiteまたはmのor検索なのか によって処理は違います。 仮に前者であれば全部未チェックの場合は全部非表示ですので後者ですか? 後者では絞り込みとしてはあまり意味がないようにみえます。 折衷案として、style,color,size、のどれかが設定されていたらそれを利用して and検索をする(選ばれていない項目は全部がヒット)ということでしょうか? またand検索の場合仮にcolorがwhiteとpinkの両方を選ぶと、whiteかつpinkは有りえないので ヒットがなくなると思います。 よくよく仕様を検討しなおしてみてください sample ======= すべてor検索 ``` $(function(){ $('[type=checkbox]').on('change',function(){ var classList=[]; if($('#style,#color,#size').find('[type=checkbox]:checked').length==0){ $('.result section').show(); }else{ $('#style,#color,#size').find('[type=checkbox]:checked').each(function(){ classList.push("."+$(this).attr('id')); }); $('.result').find('section').hide().end().find(classList.join(',')).show(); } }).eq(0).trigger('change'); }); ``` ``` シャツ スカート その他 ホワイト ピンク イエロー Lサイズ Mサイズ シャツ 白 L スカート 白 M スカート ピンク L ``` カテゴリごとにand検索、ただしカテゴリ内はor検索 =========================== ``` $(function(){ $('[type=checkbox]').on('change',function(){ if($('#style,#color,#size').find('[type=checkbox]:checked').length==0){ $('.result section').show(); }else{ var myList=[]; ["style","color","size"].forEach(function(x){ if($('#'+x+' [type=checkbox]:checked').length>0){ myList.push($('#'+x+' [type=checkbox]:checked').map(function(){return '.'+$(this).attr('id');}).get()); } }); var classList=[]; for(var i=0;i=myList.length-1) break; var tmp=[]; for(var j=0;j シャツ スカート その他 ホワイト ピンク イエロー Lサイズ Mサイズ シャツ 白 L スカート 白 M スカート ピンク L ```