如何向 List.js 添加另一个过滤类别？答案

【问题标题】：How to add another filtering category to List.js?如何向 List.js 添加另一个过滤类别？
【发布时间】：2014-04-12 16:50:33
【问题描述】：

我正在使用这个库：http://listjs.com/

我需要添加另一个类别来过滤，所以我这样添加：

<script type="text/javascript">

    /* 
    * LOVELY THINGS
    */

    var templates = {
        valueNames: [ 'name', 'description', 'category' ]
    };

    var featureList = new List('lovely-things-list', templates);

    $('#filter-games').click(function() {
        featureList.filter(function(values) {
            if (values.category == "Game") {
                return true;
            } else {
                return false;
            }
        });
        return false;
    });

    $('#filter-NewCategory').click(function() {
        featureList.filter(function(values) {
            if (values.category == "NewCategory") {
                return true;
            } else {
                return false;
            }
        });
        return false;
    });


    $('#filter-beverages').click(function() {
        featureList.filter(function(values) {
            if (values.category == "Beverage") {
                return true;
            } else {
                return false;
            }
        });
        return false;
    });
    $('#filter-none').click(function() {
        featureList.filter(function(values) {
            return true;
        });
        return false;
    });
</script>

还有这样的按钮：

<li class="btn" id="filter-NewCategory">Only show New Category</li>

然后过滤不能正常工作。第一类作品的第一个按钮，第二个添加一些结果，第三个作品有时等等。

也许有人知道我做错了什么？

【问题讨论】：

标签： javascript filtering

【解决方案1】：

过滤函数获取的属性是单个项目。您需要执行以下操作来进行比较：

$('#filter-games').click(function() {
    featureList.filter(function(item) {
        if (item.values().category == "Game") {
            return true;
        } else {
            return false;
        }
    });
    return false;
});

而要重置过滤器，您只需这样做

featureList.filter();

此处的完整示例： http://pastebin.com/UPB095pk

【讨论】：

【解决方案2】：

看起来您的第二个 .click 正在绑定到 #filter-games，而您的意思是绑定到 #filter-NewCategory？

尝试更改代码以读取：

 $('#filter-NewCategory').click(function() {
    featureList.filter(function(values) {
        if (values.category == "NewCategory") {
            return true;
        } else {
            return false;
        }
    });
    return false;
 });

【讨论】：