Мне нужно использовать несколько фильтров, используя атрибуты data . Он работает в комбинации, но не работает в одиночку. Вот мой код:
<ul> <li> <div class="sts"> <h1>filter 1</h1> </h1> <div class="checkbox"> <label> <input data-id="1" class="st" type="checkbox" /> 1 </label> </div> <div class="checkbox"> <label> <input data-id="2" class="st" type="checkbox" /> 2 </label> </div> <div class="checkbox"> <label> <input data-id="3" class="st" type="checkbox" /> 3 </label> </div> </div> </li> <li> <h1>filter 2</h1> <div class="ats"> <div class="checkbox"> <label> <input data-id="foo" class="at" type="checkbox" /> foo </label> </div> <div class="checkbox"> <label> <input data-id="boo" class="at" type="checkbox" /> boo </label> </div> <div class="checkbox"> <label> <input data-id="bar" class="at" type="checkbox" /> bar </label> </div> </div> </li> <li> <h1>filter 3</h1> <div class="dpts"> <div class="checkbox"> <label> <input data-id="a" class="dpt" type="checkbox" /> a </label> </div> <div class="checkbox"> <label> <input data-id="b" class="dpt" type="checkbox" /> b </label> </div> <div class="checkbox"> <label> <input data-id="c" class="dpt" type="checkbox" /> c </label> </div> <div class="checkbox"> <label> <input data-id="d" class="dpt" type="checkbox" /> d </label> </div> </div> </li> </ul> <ul class="list"> <li data-a="foo" data-st="1" data-dpt="a">asdw</li> <li data-a="boo" data-st="2" data-dpt="c">qwedf</li> <li data-a="boo" data-st="1" data-dpt="a">qwedf</li> <li data-a="bar" data-st="3" data-dpt="b">tazxsw</li> <li data-a="bar" data-st="1" data-dpt="b">zxcvb</li> <li data-a="foo" data-st="1" data-dpt="b">poiuy</li> <li data-a="boo" data-st="2" data-dpt="d">lkjhg</li> <li data-a="boo" data-st="3" data-dpt="d">lkjhg</li> </ul>
$(function() { $('.at, .dpt,.st').on('click', function() { var checkedat = $('.at:checked'); var checkeddept = $('.dpt:checked'); var checkedst = $('.st:checked'); if (checkedat.length || checkeddept.length || checkedst.length) { if (checkeddept.length === 0) { $('.list > li').hide(); $.each(checkedat, function() { var prdId = $(this).attr('data-id'); $.each(checkedst, function() { var brandId = $(this).attr('data-id'); $('.list > li[data-a="' + prdId + '"][data-st="' + brandId + '"]').show(); }); }); } else if (checkedat.length === 0) { $('.list > li').hide(); $.each(checkedst, function() { var brandId = $(this).attr('data-id'); $.each(checkeddept, function() { var DeptId = $(this).attr('data-id'); $('.list > li[data-st="' + brandId + '"][data-dpt="' + DeptId + '"]').show(); }); }); } else if (checkedat.length === 0) { $('.list > li').hide(); $.each(checkeddept, function() { var DeptId = $(this).attr('data-id'); $.each(checkedst, function() { var brandId = $(this).attr('data-id'); $('.list > li[data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show(); }); }); } else { $('.list > li').hide(); $.each(checkedat, function() { var prdId = $(this).attr('data-id'); $.each(checkedst, function() { var brandId = $(this).attr('data-id'); $.each(checkeddept, function() { var DeptId = $(this).attr('data-id'); $('.list > li[data-a="' + prdId + '"][data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show(); }); }); }); } } else { $('.list > li').show(); } }); });
Вот ссылка jsFiddle
Если я проверю любые параметры фильтра 1, а фильтр 2 и фильтр 3 – его работу, но когда я нажимаю любую опцию из фильтра 1 или фильтра 2, его не работает