具有多个条件的JQuery列表过滤

Question

我试图使用两个不同的标准过滤大学班级的列表：类组和分区（上部或下部）。我努力显示符合每个标准的类，但是我需要列表来显示仅满足两个标准的类，即一个类是网页设计类并且是高级部门。

HTML：

<div id="classes"> 
<div class="boxes"> 
     Programs<br> 
     <span class="input"> 
      <label><input type="checkbox" rel="program1"> Web</label> 
      <label><input type="checkbox" rel="program2"> Design</label> 
      <label><input type="checkbox" rel="program3"> Print</label> 
      <label><input type="checkbox" rel="program4"> Photography</label> 

      <br>Division<br> 

      <label><input type="checkbox" rel="division1"> Lower</label> 
      <label><input type="checkbox" rel="division2"> Upper</label> 
     </span> 
    </field> 
    <br> 
    <div id="button"><input type="button" value="search"> </div> 
    <div id="reset"><input type="button" value="Reset"></div> 
</div> 

    <ul class="courses"> 

     <li class="program1 division1">GIT 101: Pictures</li> 

     <li class="program1 division2">GIT 301: Web</li> 

     <li class="program2 division1">GIT 201: Film</li> 

     <li class="program2 division2">GIT 434: Sound</li> 

     <li class="program1 division1">GIT 120: Coding</li> 

    </ul> 

</div> 

JQuery的：

<script type="text/javascript"> 
$(document).ready(function(){ 

      /*$('.courses > li').hide();*/ 

      $('div.boxes').find('input:checkbox').on('click', function() { 
       $("#button").click(function() { 
       $('.courses > li').hide(); 

       $('div.boxes').find('input:checked').each(function() { 

        $('.courses > li.' + $(this).attr('rel')).show(); 
       }); 
      }); 
     }); 

}); 

$("#reset").click(function() { 
    $(document).find('input:checkbox').removeAttr('checked'); 
    $('.courses > li').show(); 
}); 
</script> 

Answer 1

怎么样在if statement`带班更换rel和包装这样的：

if(element.hasClass('program') || element.hasClass('division'))

所以代码看起来喜欢这样的：

<label><input type="checkbox" rel="program program1"> Web</label> 

<label><input type="checkbox" rel="division division1"> Lower</label> 

Answer 2

试试这个，你遍历每个（所有输入元素）和存储选中的复选框值：

var input1, input2, r; 
$('div.boxes').find('input:checked').each(function (i) { 
    r = $(this).attr('rel'); 
    if (!input1) { 
    input1 = r; 
    } else input2 = r; 
});//assumes only 2 checkboxes can be checked, 1 for Programs and 1 for Division 

现在遍历列表中的元素，如果li元素不将上面存储的复选框勾选为input1和input2，隐藏此li元素：

var t, tC; 
$('ul.courses li').each(function (i) { 
    t = $(this); 
    tC = t.prop("class"); 
    if (!(tC.indexOf(input1) > -1) || !(tC.indexOf(input2) > -1)) t.hide(); 
});