javascript - 将数据添加到元素，以便 jquery 的 .data("key") 工作

Question

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

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

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

而且我要：

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

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

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

score 2 · Accepted Answer

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

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

然后你可以检索值$('#my-button').data('key'); //returns 42

score 1 · Accepted Answer

要像这样使用data()生成 html：

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

然后：

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

score 1 · Accepted Answer

正如其他人所指出的，$('#my-button').data('key')如果你有一个data-key属性，就会完成这项工作，但对于 jQuery >= 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. 在此处查看差异（查看您的控制台）。

3 回答 3