Question

我正在编写一个简单的javascript来隐藏/显示列表中的项目，具体取决于复选框的选中/取消选中。

例如，我可能有3个复选框，表示红色，蓝色，绿色。以及一种或多种颜色的产品列表。因此，如果选中红色和绿色复选框，则应隐藏红色或绿色不可用的产品。

我很高兴我可以做到这一点，但不是一个javascript开发人员我不确定我正在做的事情是非常优雅的（实际上我很确定它不优雅）。我在电子表格中有原始数据，因此可以轻松获取每个产品的数据的csv文件 - 例如“bike，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;
            }
        }
    }
}

传递给selectProducts的过滤器将是一个类似['x'，'x'，'']的数组，它可以表示红色或绿色但不是蓝色 - 与产品的颜色属性完全相同。我的本能最初是使用可用颜色的二进制表示（例如上面示例中的自行车101）并使用按位和过滤器认为它会更容易和更有效，但是因为javascript将数字存储为浮点数我看不出一个简单的方法来处理数字的二进制表示，感觉这将是违背谷物的。

也许以下内容会更好，但看起来有点冗长，转换为csv文件会稍微复杂一些......

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

有什么想法？

我正在做这个客户端，因为最初我不能依赖于任何PHP可用的服务器端，虽然我已经发现我可以使用PHP。我仍然喜欢客户端只是为了响应，我认为只要列表不会太长，我会更好。我可能会尝试两种方式，看看它们是如何比较的......

Answer 1

几年后......这就是我要做的事情：JSFiddle 它不一定比你的方式更正确，只是不同，我想我会与你分享。如果您使用自己的方法，那么分别使用布尔值"x"和""更改true和false绝对是一个好主意。

根据javascript中的属性过滤列表中的项目

1 个答案: