根据javascript中的属性筛选列表中的项目

我正在编写一个简单的javascript代码，根据复选框的选中/取消选中来隐藏/显示列表中的项目

例如，我可能有3个复选框，代表红色、蓝色、绿色。以及一份有一种或多种颜色可供选择的产品清单。因此，如果选中红色和绿色复选框，则应隐藏红色或绿色都不可用的产品

我很高兴我能做到这一点，但作为一名javascript开发人员，我不确定我所做的是不是非常优雅，事实上，我很确定这是不优雅的。我在电子表格中有原始数据，因此可以轻松获得每个产品的csv数据文件-例如，自行车，x，，x可能意味着自行车有红色和绿色，但没有蓝色

因此，最终可能会出现以下情况：

products = [
    {
        id: "bike",
        colours: ["x","","x"]
    },
    {
        id: "apple",
        colours: ["x","x",""]
    },
    {
        id: "cheese",
        colours: ["","","x"]
    }
];



function selectProducts(filter){
    var i;
    for(i=0; i<products.length; i++){
        var fi;
        for(fi=0; fi<filter.length; fi++){
            if(filter[fi]=='x' && products[i].colours[fi]=='x'){
            console.log(products[i].id+" will be visible ");
            break;
            }
        }
    }
}

有什么想法吗

---

我之所以使用客户端，是因为起初我不能依赖任何可用的PHP服务器端，尽管后来我发现我可以使用PHP。我仍然想在客户端做这件事，只是为了提高响应能力，我认为只要列表不要太长，这会更好。我可能会尝试这两种方法，看看它们是如何比较的……

几年后。。。我会这样做：

---

这并不一定比你的方式更正确，只是不同而已，我想我会和你分享。如果要使用您的方法，则分别使用布尔值true和false更改x和肯定是一个好主意。

过滤器字符串是什么样子的，它是如何传递给selectProducts函数的，您在客户端而不是服务器上这样做有什么特别的原因吗？感谢您的关注-selectProducts函数的调用如下，selectProducts['x'，'x'，]；我将编辑问题以回答您的评论您所做的似乎是一个快速而肮脏的解决方案。一个更整洁的版本需要一些时间来计划。

colours: {
    red: "y",
    green: "n",
    blue: "y"
}