我試圖使用兩個不同的標準過濾大學班級的列表:類組和分區(上部或下部)。我努力顯示符合每個標準的類,但是我需要列表來顯示僅滿足兩個標準的類,即一個類是網頁設計類並且是高級部門。具有多個條件的JQuery列表過濾
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>