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

Question

我有不同的复选框,可以根据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();