Question

我有一个电子商务网站，产品可以有三种变体。这就是我所拥有的

color | size   | material | price
blue  | medium | leather  | $21.00
blue  | large  | leather  | $27.00
blue  | large  | cotton   | $47.00
white | large  | cotton   | $57.00

在浏览器上我有三个下拉菜单：

color   : blue/white
size    : medium/large
material: leather/cotton

当买家更改选项时，我需要显示更新的价格。

在服务器端，我会做一个数据库查询来获取价格。在浏览器上，我必须使用JavaScript来获取价格。什么是实现它的最佳方式。

一种解决方案是在Javascript中保留一个巨大的哈希

{"blue-medium-leather" : 21.00}

此策略可行。但是我想知道在JavaScript中是否有一个我不了解的更好的解决方案。

Answer 1

您有2^3 = 8个组合。在这种情况下，我会建议这样的嵌套结构：

var prices = {
    medium: {
        leather : {
            blue: 21.0,
            white: //...
        },
        cotton: {
            //...
        }
    },
    large: {
        leather : {
            blue: 27.0,
            white: //...
        },
        cotton: {
            blue: 47.0,
            white: 57.0
        }

    }
}

查询非常简单：

var price = prices.large.cotton.white;  //57.0

或者如果你从下拉列表中获取字符串值（在jQuery中）：

var size = $('#size').val();
var material = $('#material').val();
var color = $('#color').val();
var price = prices[size][material][color];

显然，对于每个组合，此对象的大小呈指数级增长。

Answer 2

你不可能把数据库保存在JS中，对吗？您需要的是一个Web服务，您传递颜色，大小和材料，服务器返回价格。您可以使用Ajax从JavaScript调用它

最佳设计，以显示不同组合的价格

2 个答案: