Question

我正在尝试使用两个不同的标准来过滤大学课程列表：班组和科（上层或下层）。我有它的工作来显示符合每个条件的类，但是我需要列表来显示只满足两个条件的类，即一个类是Web设计类并且是上级的。

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

如何用类替换rel并将其包装在if语句中呢：

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

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

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();
});

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

2 个答案: