1

XSLTスタイルシートに、XMLファイルを処理してWebページ（ASP.NET）でユーザーに製品を表示するルーチンがいくつかあります。XSLTスタイルシートはhtmlを出力して、製品と、サイズ、色、パッケージの数量、スタイルなどの製品のバリエーションを表示します。

バリエーションは任意として扱われます。私のコードはどれも実際にはバリエーションを具体的に参照していません。XMLには、製品が持つことができるバリエーションのノードツリーが常に含まれています。次に、各製品にはこれらのバリエーションが含まれています。たとえば、XMLでは次のようになります。

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

この情報から、2つのコントロールを作成することがわかります。1つは色の選択を提供し、もう1つはサイズの選択を提供します。

製品の各バリエーションは、独自のノードの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オブジェクトも作成します。オブジェクトの1つには、次のように、可能なバリエーション属性と、属性オプションの選択を提供するコントロールの名前（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、6、8、10の3つの可能なサイズがあります。緑はサイズ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。

サイズのリストが必要な場合は、jQueryのマップ関数を使用して配列を変換できます。

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 に答える