使用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);