具有多個條件的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(); 
});