时间戳

首页 > 解决方案 > 无法访问存储在 jQuery 数据属性中的对象数组

javascript - 无法访问存储在 jQuery 数据属性中的对象数组

问题描述

我有一个对象列表，每个对象都有一个配置列表。现在，我将它们存储在列表项中

dom = '<ul class="obj-list">';
for (let i = 0; i < obj.length; i++) {
    dom += `<li
    tabindex="${i}"
    data-index="${i}"
    data-resource-config="${obj[i].configs}"

现在，如果我尝试使用attr它访问它们，它会说[object object].

当我单击ul上面构建的时，我尝试从attr

$(e.currentTarget).attr('data-resource-config')

我究竟做错了什么 ？我不能在data-*attr 中存储对象数组吗？

标签： javascriptjquerydom

解决方案

您需要对对象进行字符串化以便将其存储在属性中：

dom = '<ul class="obj-list">';
for (let i = 0; i < obj.length; i++) {
    dom += `<li
    tabindex="${i}"
    data-index="${i}"
    data-resource-config="${JSON.stringify(obj[i].configs)}"

模板字符串尝试将内部数据${}转换为字符串：

var obj = {
  a: 5
};
$("div").html(`<span data-obj=${obj}>SPAN</span>`);
console.log($("span").attr("data-obj"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

var obj = {
  a: 5
};
$("div").html(`<span data-obj=${JSON.stringify(obj)}>SPAN</span>`);
console.log($("span").attr("data-obj"));
console.log(JSON.parse($("span").attr("data-obj")));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

推荐阅读