javascript - jQuery - 使用类属性过滤 <li>

Question

我有不同的复选框，它们 onclick 根据 li 的类过滤一组约 100 个 li 元素。

过滤器:

[ ] Rock Checkbox
[ ] Rap Checkbox
[ ] Punk Checkbox
[ ] Country Checkbox

<li class="rock rap punk">...</li>
<li class="rock country">...</li>

我的 javascript 如下所示:

$(document).ready(function(){
        $('.filter').click(function() {
            var attribute = this.name;
            if ($(this).is(':checked')) {
                $('#champion-list li').each(function(index) {
                    if(!$(this).hasClass(attribute))
                        $(this).hide();
                });
            } else {
                $('#champion-list li').each(function(index) {
                    if(!$(this).hasClass(attribute))
                        $(this).show();
                });
            }
        });
    });

因此，单击任何复选框时，它都会抓取名称并根据类别进行过滤。但是，这种方法非常慢。有更好的性能想法吗？

Answer 1

选择器是一个字符串，所以你可以动态构造它:

$("#champion-list li." + attribute).hide();

要选择li 元素没有类:

$("#champion-list li :not(." + attribute + ")").hide();