javascript - 是否可以在 1 个数据属性中存储多个键/值？

Question

我想知道是否可以在data-attr类似的内部存储多个键/值：

​&lt;a href="#" data-social="network:facebook; socialId:123456789" id="facebook">Facebook</a>

然后在我的脚本中使用它们时，只需选择它们$('#facebook').data('social.socialId');或类似的东西，而不必将它们中的每一个分解成自己的属性？

Answer 1

您也不需要将其限制为仅一个data-*属性。您可以随时根据需要使用任意数量。

​&lt;a href="#" data-social-network="facebook" data-social-id="123456789" id="facebook">Facebook</a>

var socialId = $('#facebook').data('social-id');

---

但是，如果你仍然坚持。可以存储 JSON 字符串并对其进行解析。

​&lt;a href='#' data-social='{ "network": "facebook", "socialId": 123456789 }' id='facebook'>Facebook</a>

var socialId = $('#facebook').data('social').socialId;

JSON 对象由 jQuery 自动解析。

Answer 2

您可以在属性中以 JSON 格式存储数据，例如

<div id="myElement" data-json='["value1", "value2", "value3"]'></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

然后像这样检索它

var data = JSON.parse($('#myElement').attr('data-json')​);

Answer 3

将它们存储为对象。

$('#facebook').data('social', { network: 'facebook', socialId: 12345679 });

Answer 4

我相信你可以使用 JSON 并且它会自动解析

​&lt;a href="#" data-social="{network:facebook; socialId:123456789}" id="facebook">Facebook</a>

会为

$('#facebook').data('social').socialId;