###前提・実現したいこと
表題の通りなのですが、チェックボックスにチェックが入ったときに、
jQueryの.filter()
の対象を絞り込みたいです。
###該当のソースコード
まず、こちらがソート対象となるHTMLです。
html
1<div id="itemArea"> 2<div class="items banana type1" data-size="40">バナナA</div> 3<div class="items banana type0" data-size="10">バナナB</div> 4<div class="items ringo type0" data-size="25">リンゴA</div> 5<div class="items ringo type1" data-size="5">リンゴB</div> 6<div class="items ringo type0" data-size="30">リンゴC</div> 7<div class="items melon type1" data-size="18">メロンA</div> 8</div>
そして、上記のhtmlに対して、data-size=""
の値が21以上の場合に、
非表示(hide)とするJQueryが存在します。
JavaScript
1var $elm = $('#itemArea .items'); 2var $num = '20'; 3 4$elm.show().filter(function () { 5 return $(this).data('size') > $num; 6}).hide();
最後にチェックボックスのhtmlです。
checkedになると、先のhtmlにある.type1
のみが上記jQueryの.filter()
の対象となるようにしたいです。
html
1<div id="Btn"> 2<label><input type="checkbox" class="btnType"></label> 3</div>
ちなみに、チェックボックスがcheckedの状態だと、.type1
のみが表示され、
それ以外は非表示(display:none)となる別のJSが存在します。
JavaScript
1$('#Btn .btnType').change(function () { 2 if ($(this).is(':checked')) { 3 $($target).hide(); 4 } else { 5 $($target).show(); 6 } 7});
以上、何卒宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー