Question

我有以下表格，一个数组作为数据属性（我为可读性增加了间距）：

<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而言，实际上意味着＆＃34; <cart>元素，这是具有类.variations_form＆＃34;的元素的后代。你想要这个：

$('.variations_form.cart')

本质上是＆＃34;同时具有variations_form类和cart类＆＃34;的元素。

Answer 3

在'表单属性中使用单个qoute（data-product_variations），因为在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"));

DEMO

Answer 4

试试这个为我工作 -

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

使用jQuery从数据中检索对象

4 个答案: