使用jQuery從數據中檢索對象

Question

我有以下形式，一個數組作為數據屬性（為可讀性添加了空格）：

http://jsfiddle.net/tmyie/9te6n/

<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="9" data-product_variations="

[{
    "variation_id": "18",
        "variation_is_visible": true,
        "is_purchasable": true,
        "attributes": {
        "attribute_pa_size": "a3"
    },
        "image_src": "",
        "image_link": "",
        "image_title": "",
        "image_alt": "",
        "price_html": "<span class=\"price\"><span class=\"amount\">£19.20<\/span><\/span>",
        "availability_html": "",
        "sku": "100",
        "weight": " kg",
        "dimensions": "",
        "min_qty": 1,
        "max_qty": 0,
        "backorders_allowed": false,
        "is_in_stock": true,
        "is_downloadable": false,
        "is_virtual": false,
        "is_sold_individually": "no"
}, {
    "variation_id": "22",
        "variation_is_visible": true,
        "is_purchasable": true,
        "attributes": {
        "attribute_pa_size": "a5"
    },
        "image_src": "",
        "image_link": "",
        "image_title": "",
        "image_alt": "",
        "price_html": "<span class=\"price\"><span class=\"amount\">£8.75<\/span><\/span>",
        "availability_html": "",
        "sku": "100",
        "weight": " kg",
        "dimensions": "",
        "min_qty": 1,
        "max_qty": 0,
        "backorders_allowed": false,
        "is_in_stock": true,
        "is_downloadable": false,
        "is_virtual": false,
        "is_sold_individually": "no"
}, {
    "variation_id": "19",
        "variation_is_visible": true,
        "is_purchasable": true,
        "attributes": {
        "attribute_pa_size": "a4"
    },
        "image_src": "",
        "image_link": "",
        "image_title": "",
        "image_alt": "",
        "price_html": "<span class=\"price\"><span class=\"amount\">£13.50<\/span><\/span>",
        "availability_html": "",
        "sku": "100",
        "weight": " kg",
        "dimensions": "",
        "min_qty": 1,
        "max_qty": 0,
        "backorders_allowed": false,
        "is_in_stock": true,
        "is_downloadable": false,
        "is_virtual": false,
        "is_sold_individually": "no"
}]

但是，我不確定如何訪問它。 我試過了：

alert($('.variations_form cart').data('product_variations'));

和

alert($('.variations_form cart').attr('data-product_variations'));

我這樣做正確嗎？

Answer 1

嘗試

alert($('.variations_form').data('product_variations[0].variation_id');

更改類選擇器，訪問數組中的一項並指向特定字段。

Answer 2

您的選擇器有問題。 您希望使用class="variations_form cart"元素，因此您使用了以下選擇器：

$('.variations_form cart')

但是，就CSS而言，其實際含義是“ <cart>元素，它是元素.variations_form ”。 你要這個：

$('.variations_form.cart')

本質上是“同時具有variations_form類和cart類的元素”。

Answer 3

在data-product_variations表單屬性中使用單個qoute（ ' ），因為在JSON數據中，必須將qoute（ " ）加倍，

    <form class="variations_form cart" method="post" 
 enctype="multipart/form-data" data-product_id="9" data-product_variations='
    [{
        "variation_id": "18",
            "variation_is_visible": true,
            "is_purchasable": true,
            "attributes": {
            "attribute_pa_size": "a3"
        },
            "image_src": "",
            "image_link": "",
            "image_title": "",
            "image_alt": "",
            "price_html": "<span class=\"price\"><span class=\"amount\">£19.20<\/span><\/span>",
            "availability_html": "",
            "sku": "100",
            "weight": " kg",
            "dimensions": "",
            "min_qty": 1,
            "max_qty": 0,
            "backorders_allowed": false,
            "is_in_stock": true,
            "is_downloadable": false,
            "is_virtual": false,
            "is_sold_individually": "no"
    }, {
        "variation_id": "22",
            "variation_is_visible": true,
            "is_purchasable": true,
            "attributes": {
            "attribute_pa_size": "a5"
        },
            "image_src": "",
            "image_link": "",
            "image_title": "",
            "image_alt": "",
            "price_html": "<span class=\"price\"><span class=\"amount\">£8.75<\/span><\/span>",
            "availability_html": "",
            "sku": "100",
            "weight": " kg",
            "dimensions": "",
            "min_qty": 1,
            "max_qty": 0,
            "backorders_allowed": false,
            "is_in_stock": true,
            "is_downloadable": false,
            "is_virtual": false,
            "is_sold_individually": "no"
    }, {
        "variation_id": "19",
            "variation_is_visible": true,
            "is_purchasable": true,
            "attributes": {
            "attribute_pa_size": "a4"
        },
            "image_src": "",
            "image_link": "",
            "image_title": "",
            "image_alt": "",
            "price_html": "<span class=\"price\"><span class=\"amount\">£13.50<\/span><\/span>",
            "availability_html": "",
            "sku": "100",
            "weight": " kg",
            "dimensions": "",
            "min_qty": 1,
            "max_qty": 0,
            "backorders_allowed": false,
            "is_in_stock": true,
            "is_downloadable": false,
            "is_virtual": false,
            "is_sold_individually": "no"
    }]'>
    </form>

並且還請使用權限選擇器解析數據屬性內容

console.log($("form.variations_form").data("product_variations"));

演示

Answer 4

試試這個對我有用的-

var idd = $('form.variations_form').attr('data-product_variations');
console.log(idd);