javascript - 带有列表js插件的多个过滤器

Question

我正在尝试使用插件 list.js 为产品列表创建多个过滤器，即我想按颜色和项目过滤列表，目前下面的代码只对红色项目进行过滤怎么办我更改它以便如果用户同时选择颜色和项目，它会正确过滤吗？

      <form id="filter">
         <select id ="colour" name="colour">
          <option value="0">All packages</option>
        <option value="1">Red</option>
        <option value="2" >Yellow</option>
        <option value="3" >Green</option>
    </select>
    <select id ="items" name="items">
        <option value="0">All items</option>
        <option value="1" >T-shirt</option>
        <option value="2">Trousers</option>
        <option value="3" >Jumper</option>

    </select>
</form>

$('#filter-clothes').click(function() {
        featureList.filter(function(item) {
            if (item.values().colour == "Red") {
                return true;
            } else {
                return false;
            }
        });
        return false;
    });

Answer 1

我假设#filter-clothes 是用户点击以应用过滤器的按钮。

$('#filter-clothes').on('click', function() {
    var colorFilter = $('#colour').text();
    var itemFilter = $('#items').text(); 

    featureList.filter(function(item) {
        return 
            (colorFilter==='All packages' || item.values().colour === colorFilter) 
            && (itemFilter==='All items' || item.values().item === itemFilter);
    });

    return false;
});

当为颜色或项目下拉菜单选择了一个值时，您将希望通过仅应用过滤器来充实它。

编辑:这是一个带有一些 console.log() 调用的版本，应该可以帮助您弄清楚为什么它只在您使用 || 时才有效。 (OR) 而不是 && (AND):

$('#filter-clothes').on('click', function() {
    var colorFilter = $('#colour').text();
    var itemFilter = $('#items').text(); 

    console.log('colorFilter: ' + colorFilter);
    console.log('itemFilter : ' + itemFilter);
    console.log('Applying filter now...');

    featureList.filter(function(item) {
        console.log('Running filter() on item: ('+item+')');
        console.log('item.values().colour: ' + item.values().colour);
        console.log('item.values().item: ' + item.values().item);

        return 
            (colorFilter==='All packages' || item.values().colour === colorFilter) 
            && (itemFilter==='All items' || item.values().item === itemFilter);
    });

    return false;
});