jQueryを使用して、要素の絞り込みを行いたいです。
最初はすべての要素が表示されており、チェックボックスにチェックをつける(または外す)ことで、
そのチェックボックスについているidと同じclassを持つ要素の表示・非表示を行いたいと考えています。
下記アドレスで紹介されているものと同じような形だったので、こちらを参考にしてみました。
http://jsdo.it/carl_marie/jquery_hide_rows
ですが、今回、ANDだけでなくORでの条件も必要になってしまい、
例えば、
「attribute01」「attribute02」「type03」「type06」「option03」「option02」
にチェックがついている場合は、
「attribute01」もしくは「attribute02」のclassを持つものの中から「type03」「type06」「option03」「option02」のいずれかのclassを持つものを表示
というようにしたいです。
HTML
1<div id="search"> 2 <ul id="attribute"> 3 <li><label class="selected"><input type="checkbox" id="all" class="sort" checked="checked">すべて</label></li> 4 <li><label><input type="checkbox" id="attribute01" class="sort">attribute01</label></li> 5 <li><label><input type="checkbox" id="attribute02" class="sort">attribute02</label></li> 6 <li><label><input type="checkbox" id="attribute03" class="sort">attribute03</label></li> 7 <li><label><input type="checkbox" id="attribute04" class="sort">attribute04</label></li> 8 <li><label><input type="checkbox" id="attribute05" class="sort">attribute05</label></li> 9 </ul> 10 11 <ul id="type"> 12 <li><label><input type="checkbox" id="type01" class="sort">type01</label></li> 13 <li><label><input type="checkbox" id="type02" class="sort">type02</label></li> 14 <li><label><input type="checkbox" id="type03" class="sort">type03</label></li> 15 <li><label><input type="checkbox" id="type04" class="sort">type04</label></li> 16 <li><label><input type="checkbox" id="type05" class="sort">type05</label></li> 17 <li><label><input type="checkbox" id="type06" class="sort">type06</label></li> 18 <li><label><input type="checkbox" id="type07" class="sort">type07</label></li> 19 <li><label><input type="checkbox" id="type08" class="sort">type08</label></li> 20 </ul> 21 22 <ul id="option"> 23 <li><label><input type="checkbox" id="option01" class="sort">option01</label></li> 24 <li><label><input type="checkbox" id="option02" class="sort">option02</label></li> 25 <li><label><input type="checkbox" id="option03" class="sort">option03</label></li> 26 <li><label><input type="checkbox" id="option04" class="sort">option04</label></li> 27 <li><label><input type="checkbox" id="option05" class="sort">option05</label></li> 28 <li><label><input type="checkbox" id="option06" class="sort">option06</label></li> 29 <li><label><input type="checkbox" id="option07" class="sort">option07</label></li> 30 <li><label><input type="checkbox" id="option08" class="sort">option08</label></li> 31 <li><label><input type="checkbox" id="option09" class="sort">option09</label></li> 32 <li><label><input type="checkbox" id="option10" class="sort">option10</label></li> 33 </ul> 34</div><!-- /.#search --> 35 36<ul id="list"> 37 <li class="attribute01 type01 option03"><a href="#"><img src="sample.jpg"></a></li> 38 <li class="attribute03 type03 type02 option01"><a href="#"><img src="sample.jpg"></a></li> 39 <li class="attribute02 type05 type03 option04 option05"><a href="#"><img src="sample.jpg"></a></li> 40 <li class="attribute05 type06 option06"><a href="#"><img src="sample.jpg"></a></li> 41 <li class="attribute03 type07 option05"><a href="#"><img src="sample.jpg"></a></li> 42 <li class="attribute04 type04 option07"><a href="#"><img src="sample.jpg"></a></li> 43 <li class="attribute03 type02 option08"><a href="#"><img src="sample.jpg"></a></li> 44 <li class="attribute04 type08 option09"><a href="#"><img src="sample.jpg"></a></li> 45 <li class="attribute01 type03 option01"><a href="#"><img src="sample.jpg"></a></li> 46 <li class="attribute02 type02 option10"><a href="#"><img src="sample.jpg"></a></li> 47</ul>
CSS
1#list [class*="hidden-"] { 2 display: none !important; 3} 4
jQuery
1$(function (){ 2 var $filter_tags =['attribute01','attribute02','attribute03','attribute04','attribute05','type01','type02','type03','type04','type05','type06','type07','type08','option01','option02','option03','option04','option05','option06','option07','option08','option09','option10']; 3 var $filter_all = $('#all'); 4 5 //チェックボックスがクリックされた時 6 $("#search li label input").click(function() { 7 8 $(this).parent().toggleClass("selected"); 9 10 $.each($filter_tags, function() { 11 if($('#' + this).is(':checked')) { 12 $("#list li:not(." + this + ")").addClass('hidden-not-' + this); 13 $filter_all.prop('checked',false).parent().removeClass("selected"); 14 } 15 else if($('#' + this).not(':checked')) { 16 $("#list li:not(." + this + ")").removeClass('hidden-not-' + this); 17 } 18 }); 19 20 //チェックボックスが1つも選択されていない場合に、絞り込まないボタンにclass="selected"をつける 21 if ($('.sort:checked').length == 0 ){ 22 $filter_all.prop('checked',true).parent().addClass("selected"); 23 $(".sort").parent().removeClass("selected"); 24 }; 25 }); 26});
ORにするためにはどのようにすればいいのか、全く見当がつかず…
お手数をおかけしますが、よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/05 10:19
2016/08/05 10:39
2016/08/05 10:58
2016/08/05 11:49