チェックボックスを利用した要素の絞り込みを実装しており、子要素が全て非表示になったら親要素も非表示にしたいと思っているのですが、ググっても思うようなサンプルが見つからず、ご教授いただければと思っております。
同じclassを持った親要素が複数ある状態で、それぞれ中に子要素が不特定数入っています。
それとは別にチェックボックスが複数用意されており、子要素のclassと、選択されたチェックボックスを見て、それが含まれていない場合のみ、子要素に「class="hidden-not-○○"(hidden-not-red、hidden-not-sour等)」が付与され、css制御で「[class*="hidden-"]{display:none}」が適用され非表示になります。
また、選択したチェックボックスを解除すると、付与された非表示用のclassが削除され、再び表示されるようになります。
ある親要素内の子要素が全て非表示になった場合、親要素に「class="hidden-not-display"」を付与したいのですが、どのようにすればよろしいでしょうか。
html
1<script> 2 var $chkbxFilter_tags = ['red','yellow','green','vegetable','fruit','sweet','hot','sour']; 3 var $chkbxFilter_blocks = ['section'] 4</script> 5 6<div id="search-box"> 7 <div class="list-group"> 8 <label class="list-group-item disabled"> 9 <p class="list-group-item-text">色</p> 10 </label> 11 <label class="list-group-item"> 12 <input type="checkbox" id="red" class="sort s_color"> 13 <h4 class="list-group-item-heading">赤</h4> 14 </label> 15 <label class="list-group-item"> 16 <input type="checkbox" id="yellow" class="sort s_color"> 17 <h4 class="list-group-item-heading">黄</h4> 18 </label> 19 <label class="list-group-item"> 20 <input type="checkbox" id="green" class="sort s_color"> 21 <h4 class="list-group-item-heading">緑</h4> 22 </label> 23 </div> 24 <div class="list-group"> 25 <label class="list-group-item disabled"> 26 <p class="list-group-item-text">種類</p> 27 </label> 28 <label class="list-group-item"> 29 <input type="checkbox" id="vegetable" class="sort s_type"> 30 <h4 class="list-group-item-heading">野菜</h4> 31 </label> 32 <label class="list-group-item"> 33 <input type="checkbox" id="fruit" class="sort s_type"> 34 <h4 class="list-group-item-heading">果物</h4> 35 </label> 36 </div> 37 <div class="list-group"> 38 <label class="list-group-item disabled"> 39 <p class="list-group-item-text">味</p> 40 </label> 41 <label class="list-group-item"> 42 <input type="checkbox" id="sweet" class="sort s_taste"> 43 <h4 class="list-group-item-heading">甘い</h4> 44 </label> 45 <label class="list-group-item"> 46 <input type="checkbox" id="hot" class="sort s_taste"> 47 <h4 class="list-group-item-heading">辛い</h4> 48 </label> 49 <label class="list-group-item"> 50 <input type="checkbox" id="sour" class="sort s_taste"> 51 <h4 class="list-group-item-heading">酸っぱい</h4> 52 </label> 53 </div> 54</div> 55 56<div id="item_images_wrap"> 57 <div class="about_sale_main"> 親要素 58 <section class="sale_wrap red vegetable sweet"></section> 子要素 59 <section class="sale_wrap red fruit hot"></section> 60 <section class="sale_wrap red fruit sour"></section> 61 <section class="sale_wrap yellow fruit sour"></section> 62 <section class="sale_wrap yellow vegetable sweet"></section> 63 <section class="sale_wrap yellow vegetable hot"></section> 64 <section class="sale_wrap green fruit sweet"></section> 65 <section class="sale_wrap green fruit hot"></section> 66 <section class="sale_wrap green vegetable sour"></section> 67 </div> 68 <div class="about_sale_main"> 69 ...不特定数 70 </div> 71 <div class="about_sale_main"> 72 ...不特定数 73 </div> 74</div>
Javascript
1$(function (){ 2 $('.s_color').on('click', function() { 3 if ($(this).prop('checked')){ 4 $('.s_color').prop('checked', false); 5 $(this).prop('checked', true); 6 } 7 }); 8 $('.s_type').on('click', function() { 9 if ($(this).prop('checked')){ 10 $('.s_type').prop('checked', false); 11 $(this).prop('checked', true); 12 } 13 }); 14 $('.s_taste').on('click', function() { 15 if ($(this).prop('checked')){ 16 $('.s_taste').prop('checked', false); 17 $(this).prop('checked', true); 18 } 19 }); 20 21 var $chkbxFilter_all = $('#all'); 22 $chkbxFilter_all.click(function() { 23 $(".sort").prop('checked',false); 24 $chkbxFilter_all.prop('checked',true); 25 }); 26 $("#search-box input").click(function() { 27 $(this).parent().toggleClass("selected"); 28 $.each($chkbxFilter_tags, function() { 29 if($('#' + this).is(':checked')) { 30 $("#item_images_wrap " + $chkbxFilter_blocks + ":not(." + this + ")").addClass('hidden-not-' + this); 31 $chkbxFilter_all.prop('checked',false).parent().removeClass("selected"); 32 } else if($('#' + this).not(':checked')) { 33 $("#item_images_wrap " + $chkbxFilter_blocks + ":not(." + this + ")").removeClass('hidden-not-' + this); 34 } 35 }); 36 if ($('.sort:checked').length == 0 ){ 37 $chkbxFilter_all.prop('checked',true).parent().addClass("selected"); 38 $(".sort").parent().removeClass("selected"); 39 }; 40 hoge() 41 }); 42}); 43
※javascriptは http://jsfiddle.net/kah601xq/11/ を参考にし、改変して使用しています。
回答2件
あなたの回答
tips
プレビュー