将数据添加到元素，以便jquery的.data（“key”）工作

Question

我看到jquery有一个函数.data("key")，它在被调用的元素中返回该键的值。我想使用该方法，但为此我需要使用html设置数据。 （我需要在元素存在之前在我的handlebars模板助手中设置它。）

例如，假设我有以下html文本：

'<button id=\"my-button\">button</button>');

我想要：

$('#my-button').data('datakey');

要返回42，我该如何在html中执行此操作？

或者，如果这样做不切实际，我该怎么办呢？

Answer 1

要使用data，您需要拥有data-样式属性：<button id="my-button" data-key="42">button</button>

使用数据函数设置值：$('#my-button').data('key', 42);

然后您可以使用$('#my-button').data('key'); //returns 42

检索该值

http://api.jquery.com/data/

Answer 2

使用data()生成html，如下所示：

<button id="my-button" data-key="42">button</button>

然后：

// exactly without 'data' prefix 
$('#my-button').data('key');
// will return 42.

Answer 3

正如其他人所说，$('#my-button').data('key')如果你有data-key属性就可以完成这项任务，但对于jQuery＆gt; = 1.4.3也是如此。

另外，请注意jQuery将尽力将属性值字符串转换为JavaScript值（整数，数组，对象等）。所以，如果你有

<button id="my-button" data-key='{"hello": "you", "lol": 42}'>button</button>

然后$('#my-button').data('key')将返回对象

{
    hello: 'you',
    lol: 42
}

而不是字符串{"hello": "you", "lol": 42}。

我倾向于选择attr代替data。即使是不支持data-属性的旧浏览器仍会将此属性保留在元素的DOM节点中，因此使用attr，您始终可以获得字符串值属性：

value = $('#my-button').attr('data-key');

当然，您必须在此处提供完整的属性名称，即data-key。查看差异here（查看您的控制台）。