[英]Retrieve object from data with jQuery
I have the following form, an array as a data attribute (I've added spacing for readability): 我有以下形式,一个数组作为数据属性(为可读性添加了空格):
http://jsfiddle.net/tmyie/9te6n/ 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"
}]
However, I'm not sure how to access it. 但是,我不确定如何访问它。 I've tried:
我试过了:
alert($('.variations_form cart').data('product_variations'));
and 和
alert($('.variations_form cart').attr('data-product_variations'));
Am I doing this correctly? 我这样做正确吗?
Try 尝试
alert($('.variations_form').data('product_variations[0].variation_id');
Change class selectors, access one item in the array and point to a specific field. 更改类选择器,访问数组中的一项并指向特定字段。
There's an issue with your selector. 您的选择器有问题。 You want the element with
class="variations_form cart"
, so you've used this selector: 您希望使用
class="variations_form cart"
元素,因此您使用了以下选择器:
$('.variations_form cart')
However, in terms of CSS that actually means "a <cart>
element this is a descendant of an element with the class .variations_form
". 但是,就CSS而言,其实际含义是“
<cart>
元素,它是元素.variations_form
”。 You want this: 你要这个:
$('.variations_form.cart')
which is essentially "the elements that have both the variations_form
class and the cart
class". 本质上是“同时具有
variations_form
类和cart
类的元素”。
USE single qoute( '
) in data-product_variations
form attribute, because in JSON data have to double qoute( "
), 在
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>
and also please use right selector to parse data attribute content 并且还请使用权限选择器解析数据属性内容
console.log($("form.variations_form").data("product_variations"));
Try this Worked for me - 试试这个对我有用的-
var idd = $('form.variations_form').attr('data-product_variations');
console.log(idd);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.