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

Answer 2

$(function(){

    //cache the list for context
    var list = $('#champion-list')

    //use ".on()" to attach a single handler to the parent
    //onchange, i think, is better since there are keyboard users
    $('filter_parent_container').on('change','.filter',function() {

        var attribute = this.name;

        //directly use the attribute instead of using hasClass()
        if (this.checked) {
            $("li." + attribute,list).hide();
        } else {
            $("li." + attribute,list).show();
        }

    });
});

Answer 3

缓存您的选择器。此外，您可以使用filter()代替each()并在那里获得一些效果：

var $items = $('#champion-list li');
$('.filter').change(function () {
    var that = this,
        $itemsAtt = $items.filter(function () {
            return !$(this).hasClass(that.name);
        });
    $(this).is(':checked') ? $itemsAtt.hide() : $itemsAtt.show();
});

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

3 个答案: