Question

我想从html数据属性中找到数组中的值。并比较一些参数的值。

我的数据属性如下所示：

<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="22" data-product_variations="[{"variation_id":"23","variation_is_visible":true,"is_purchasable":true,"attributes":{"attribute_pa_color":"black"},"image_src":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_4_front1-450x470.jpg","image_link":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_4_front1.jpg","image_title":"T_4_front","image_alt":"","price_html":"","availability_html":"","sku":"","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":"1531","variation_is_visible":true,"is_purchasable":true,"attributes":{"attribute_pa_color":"green"},"image_src":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_3_front-450x470.jpg","image_link":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_3_front.jpg","image_title":"T_3_front","image_alt":"","price_html":"","availability_html":"","sku":"","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>

我的回答是将其转换为数组，然后获取image_src和image_link。

我从这开始：

var variationIMG = $('.variations_form.cart').attr('data-product_variations').split('},{');

variationIMG.map(function (img) {
   console.log(img);
    if (img.image_src == "scr") {
        return img.image_src
    } else {
        return null
    }
});

但它不起作用，因为我没有成功分割数据属性。

Answer 1

您的html未正确转义，请尝试

<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="22" data-product_variations='[{"variation_id":"23","variation_is_visible":true,"is_purchasable":true,"attributes":{"attribute_pa_color":"black"},"image_src":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_4_front1-450x470.jpg","image_link":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_4_front1.jpg","image_title":"T_4_front","image_alt":"","price_html":"","availability_html":"","sku":"","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":"1531","variation_is_visible":true,"is_purchasable":true,"attributes":{"attribute_pa_color":"green"},"image_src":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_3_front-450x470.jpg","image_link":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_3_front.jpg","image_title":"T_3_front","image_alt":"","price_html":"","availability_html":"","sku":"","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>

然后

var variationIMG = $('.variations_form.cart').data('product_variations');

var array = $.map(variationIMG, function (img) {
    return img.image_src
});

console.log(array)

演示：Fiddle

数据属性为多数组

1 个答案: