使用 jQuery vars 设置 HTML5 数据数组答案

【问题标题】：Set an HTML5 data array using jQuery vars使用 jQuery vars 设置 HTML5 数据数组
【发布时间】：2014-01-27 14:59:10
【问题描述】：

我已经为此苦苦挣扎了一段时间，似乎找不到正确的语法。

如果我在 JS 中声明了这些变量：

var width = 300,
    height = 200,
    time = 100;

还有一些html：

<div class="target">Target</div>

如何使用 jQuery 将这些变量设置为 html5 数据数组到目标 div 上，如下所示：

<div class="target" data-stuff='["300","200","100"]'>Target</div>

【问题讨论】：

【解决方案1】：

怎么样：

a = $(".target").data("stuff");

var width = a[0],
    height = a[1],
    time = a[2];

更新

如果要在html数据属性中设置变量，只需：

$(".target").data("stuff", [width, height, time]);

【讨论】：

【解决方案2】：

要将数据属性插入到您的 HTML 内容中，您需要使用 .attr() 方法：

$('.target').attr('data-stuff', '['+[width, height, time].toString()+']');

如果只为元素设置数据，而不需要在 HTML 中实际设置属性，请使用.data()：

$('.target').data('stuff', [width, height, time]);

要检索这两者中的任何一个的值，请使用：

$('.target').data('stuff')

这将在两种情况下都返回数组[300, 200, 100]。这个脚本的演示可以看到here。只需打开您的控制台（在 Chrome 中：ctrl+shift+J，在 Internet Explorer 中：F12 然后 Ctrl+2) 你会在底部看到 2 个数组。

【讨论】：

【解决方案3】：

试试这个：

var width = 300,
height = 200,
time = 100;

$(".target").data("myarray", [width, height, time]);

console.log($(".target").data("myarray"));

【讨论】：