Question

我的数据属性如下所示：

data-image="[object Object],[object Object] "

Answer 1

只有字符串/数字可以存储在属性中。因此，如果要存储图像详细信息，只需存储图像的src即可。如果由于某种原因您想要存储对象，请先将其转换为字符串，然后在检索时将其转换为对象。

//Convert to String 
var mystring = JSON.stringify(myobject); // store this in the attribute. 

//Convert to Object while retrieving 
var myobj = JSON.parse(mystring);

Answer 2

实际上，当您检索此内容时，您将只获得值为[object Object],[object Object]的字符串。您使用错误的语法将数据保存在data-attribute中。首先尝试将data-image的值设置为JSON格式，然后保留data-image属性。之后，您可以通过（参见评论）

检索您的数据

＆＃13;

const dataArray = [ { name: 'Name1' }, { name: 'Name2' } ];
const div = $('#div');

div.data('image', JSON.stringify(dataArray)); // keep the attribute as string 

const retrievedDataImageAsJSON = div.data('image'); // retrieve the data attribute as string
const dataObj = JSON.parse(retrievedDataImageAsJSON); // parse from JSON into JS objects.

console.log(dataObj);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div' data-image>

</div>

＆＃13;

Answer 3

如果data-*属性设置为HTML，则使用有效JSON作为值，JSON.stringify()和JSON.parse()设置并获取data-*属性值为一个JavaScript对象。您可以使用data-*

获取并设置HTML HTMLElement.dataset属性

＆＃13;

console.log(
  JSON.parse(
    document.querySelector("div").dataset.image
  )
)

＆＃13;

<!-- set `data-*` attribute value as valid `JSON` -->
<div data-image='[{"a":123}, {"b":456}]'></div>

＆＃13;

如何使用jquery检索数据属性值是一个对象数组

3 个答案: