1

我在 XSLT 样式表中有一些例程，它们处理 XML 文件以在网页 (ASP.NET) 中向用户显示产品。XSLT 样式表输出一个 html 来显示产品以及产品的任何变体，例如尺寸、颜色、包装数量、样式等。

变化被任意处理。我的代码实际上都没有具体提到变体。XML 始终包含产品可以具有的变体的节点树。然后每个产品都包含这些变化。例如，在 XML 中：

<Variations>
    <Variation>
        <Name>Color</Name>
    </Variation>
    <Variation>
        <Name>Size</Name>
    </Variation>
</Variations>

从这些信息中我知道要创建两个控件。一个提供颜色选择，另一个提供尺寸选择。

产品的每个变体都在其自己的节点中的 XML 中列出。它具有唯一的产品 ID - 与所有其他产品变体不同。例如：

<Product>
    <ID>000001</ID
    <VariationAttribute>
        <Name>Color</Name>
        <Value>Green</Value
    </VariationAttribute>
    <VariationAttribute>
        <Name>Size</Name>
        <Value>6</Value>
    </VariationAttribute>
</Product>
<Product>
    <ID>000002</ID
    <VariationAttribute>
        <Name>Color</Name>
        <Value>Multiple(orange)</Value
    </VariationAttribute>
    <VariationAttribute>
        <Name>Size</Name>
        <Value>6</Value>
    </VariationAttribute>
</Product>

在我的 XSLT 中，我创建了一个属性的所有可能值的唯一列表。例如，许多产品的颜色为绿色，但尺寸不同。许多产品的尺寸为 6，但颜色不同。因此，我对每个属性进行唯一排序，并在我的 XSLT 中创建 DropDownLists。

现在我需要一种允许用户将商品添加到购物车的方法。这需要知道产品 ID，因此我的 XSLT 还创建了一些 JSON 对象。其中一个对象包含可能的变体属性和提供属性选项选择的控件的名称 (ID)，如下所示：

var propCtlMap = [{"Color": "ddColor","Size": "ddSize"}]

另一个 JSON 对象包含所有可能的产品配置的列表，如下所示：

var datalist = [
{"pID": "000001","Color": "Green","Size": "6"},
{"pID": "000002","Color": "Multiple(orange)","Size": "6"},
{"pID": "000003","Color": "Multiple(purple)","Size": "6"},
{"pID": "000004","Color": "Multiple(red)","Size": "6"},
{"pID": "000005","Color": "Purple","Size": "6"},
{"pID": "000006","Color": "Green","Size": "8"},
{"pID": "000007","Color": "Multiple(orange)","Size": "8"},
{"pID": "000008","Color": "Multiple(purple)","Size": "8"},
{"pID": "000009","Color": "Multiple(red)","Size": "8"},
{"pID": "000010","Color": "Purple","Size": "10"},
etc, etc
]

到目前为止，我已经完成了所有这些工作。我有处理 DropDownList 的 JQuery 事件.change。然后将所有选定的变体选项映射到产品 ID。这允许我在隐藏字段中包含产品 ID，这样当用户单击“添加到购物车”按钮时，他们的选择就会得到处理。同样，这一切都很好。

现在到我的具体问题......我希望能够禁用不可用/无库存的变体选项。我知道可以禁用 DropDownList 中的选择。我有用 ASP 编写的代码。我想我可以将它转换为 JQuery，但我不知道该怎么做是确定（从datalist上面，在 JQuery 中）哪些选项不可用。在datalist上面，有 3 种可能的尺寸 - 6、8 和 10。绿色有 6 和 8 码，但没有 10 码。同样，紫色有 10 码，但没有 6 或 8 码。

我认为必须有一些使用 JQuery/Javascript 的方法/函数可以帮助我制作所有选项的矩阵，以便我可以禁用无效的选项。在上面的示例中，如果用户选择了紫色，我将需要该颜色中所有可用尺寸的列表。同样，如果用户选择了 8 号，我想要一个该尺寸中所有可用颜色的列表。

我想如果我知道如何获得这些列表，我就可以处理剩下的大部分编码。

顺便说一句，我现在只学习 JQuery/Javascript 大约 2 周。我知道的很少，但我正在追赶。

谢谢。

4

1 回答 1

1

你可以使用 jQuery 的grep函数来过滤你的数组：

var objectArray = JSON.parse(json);

var purpleElements = $.grep(objectArray, function (element, index) {
    // purpleElements will contain all of those values in objectArray for which
    // this function returns true.
    return element.Color === "Purple";
});

$.each(purpleElements, function (index, element) {
    alert(element.Color + ": " + element.Size);
});

会提醒：Purple: 6, Purple: 10.

如果你只是想要一个 Sizes 列表，你可以使用 jQuery 的map函数来转换数组：

var sizes = $.map(purpleElements, function (element, index) {
    // sizes will contain an array of the return values of this function
    // for each element in purpleElements.
    return element.Size;
});

$.each(sizes, function (index, element) {
    alert(element);
});

会提醒6，10。

看到这个 jsFiddle。

于 2012-07-01T09:56:37.217 回答