前提・実現したいこと
画像を3つの条件(or検索)で表示したいと思っています。
2つの条件検索(#styleと#color)では問題なかったコードに、1つ条件(#size)を加えてみた所
まったく画像が検索(表示)されなくなってしまいました。
こちらのコードで間違っている点をお教え頂けませんでしょうか。
よろしくお願い致します。
※最初にすべての画像が表示されていて、条件をクリックするとその画像が表示される様にしたいと思っています。
該当のソースコード
html
1<form> 2<div id="select" > 3<!--all(ページリロード)ボタン--> 4<input type="button" value="ALL" onclick="allselect()"> 5 6<!--画像絞り込み 選択欄--> 7<div id="style"><!--「style」と「color」と「size」はor検索--> 8<label for="shirt"><input type="checkbox" id="shirt">シャツ</label> 9<label for="skirt"><input type="checkbox" id="skirt">スカート</label> 10<label for="another"><input type="checkbox" id="another">その他</label> 11</div> 12<div id="color"> 13<label for="white"><input type="checkbox" id="white">ホワイト</label> 14<label for="pink"><input type="checkbox" id="pink">ピンク</label> 15<label for="yellow"><input type="checkbox" id="yellow">イエロー</label> 16</div> 17<div id="size"> 18<label for="l"><input type="checkbox" id="l">Lサイズ</label> 19<label for="m"><input type="checkbox" id="m">Mサイズ</label> 20</div> 21</div> 22</form> 23 24<!--画像絞り込み 結果表示--> 25<div class="result"> 26<section class="skirt white m"><img src="image/sample.jpg" ></section> 27<section class="shirt pink l"><img src="image/sample2.jpg" ></section> 28〜<!--画像続く-->
試したこと
javascript
1$(function(){ 2 $('.result section').show(); 3 4 $('#style,#color,#size').find('input').on('click',function(){ 5 $('.result section').hide(); 6 $('#style [type=checkbox]:checked').each(function(){ 7 var checkstyle=$(this).prop('id'); 8 $('#color [type=checkbox]:checked').each(function(){ 9 var checkcolor=$(this).prop('id'); 10 $('#size [type=checkbox]:checked').each(function(){ 11 var checksize=$(this).prop('id'); 12 $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor) && $(this).hasClass(checksize);}).fadeIn(); 13 14 }); 15 }); 16 17 if($('#style [type=checkbox]:checked').length==0){ 18 $('#color [type=checkbox]:checked').each(function(){ 19 var checkcolor=$(this).prop('id'); 20 $('#size [type=checkbox]:checked').each(function(){ 21 var checksize=$(this).prop('id'); 22 $('.result section').filter(function(){return $(this).hasClass(checkcolor) && $(this).hasClass(checksize);}).fadeIn(); 23 }); 24 }); 25 }; 26 27 if($('#color [type=checkbox]:checked').length==0){ 28 $('#style [type=checkbox]:checked').each(function(){ 29 var checkstyle=$(this).prop('id'); 30 $('#size [type=checkbox]:checked').each(function(){ 31 var checksize=$(this).prop('id'); 32 $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checksize);}).fadeIn(); 33 }); 34 }); 35 }; 36 37 if($('#size [type=checkbox]:checked').length==0){ 38 $('#style [type=checkbox]:checked').each(function(){ 39 var checkstyle=$(this).prop('id'); 40 $('#color [type=checkbox]:checked').each(function(){ 41 var checkcolor=$(this).prop('id'); 42 $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor);}).fadeIn(); 43 }); 44 }); 45 }; 46 47 if($('#select [type=checkbox]:checked').length==0){ 48 $('.result section').fadeIn(); 49 }; 50 }) 51}); 52 53function allselect() { 54 $('.result section').fadeIn(); 55 $('#select input[type="checkbox"]').prop('checked', false); 56};
回答2件
あなたの回答
tips
プレビュー