HTML数据集-如何放置对象?data-x＝｛｝

Question

HTML：

<a data-test="{a: 1}">test</a>

但在ChromeConsole:中

> document.querySelector('a').dataset.test
< "{a: 1}"
typeof document.querySelector('a').dataset.test
"string"

我预期：

> document.querySelector('a').dataset.test
< {a: 1}
typeof document.querySelector('a').dataset.test
"object"

如何编写此HTML？(无javascript(

Answer 1

您可以按照以下方式编写HTML。

<a data-test='{"a": 1}'>test</a>

然后在你的脚本

console.log(JSON.parse(document.querySelector('a').dataset.test));

输出将是

{a: 1}

Answer 2

您可以使用JSON.parse(string object)。

var x = JSON.parse(document.querySelector('a').dataset.test);
console.log(x);

编辑时间：请确保<a>标记中的对象属性是有效的JSON。应该是<a data-test='{"a": 1}'>test</a>

Answer 3

这是不可能的。元素的数据集项只能包含字符串，不能包含其他内容-毕竟，它意味着可以直接在HTML中表示，而HTML是一个字符串。

将数据集项设置为JSON格式，然后进行解析：

<a data-test='{"a": 1}'>test</a>

(注意键周围的双引号，根据JSON的要求(

const a = document.querySelector('a');
a.dataset.test = JSON.stringify({ a: 1 });
const test = JSON.parse(a.dataset.test);
console.log(test);
console.log(typeof test);

<a>test</a>

或者以其他方式将元素与其数据相关联，也许是与Map相关联，Map的键是元素，值是关联的对象(如果可以的话(：

const map = new Map();
const a = document.querySelector('a');
map.set(a, { a: 1 });
const result = map.get(a);
console.log(result);
console.log(typeof result);

<a>test</a>