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

Question

我想知道是否可以在data-attr内存储多个键/值，如：

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

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

Answer 1

您无需将其限制为仅一个data-*属性。你总是可以根据需要使用它。

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

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

---

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

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

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

JQuery对象由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并自动解析，我相信

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

将为

提供可能性

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