带有变量的HTML元素
在jQuery中，我可以创建一个包含数据的HTML元素：
$('').data("field", { i: i, j: j }).appendTo("body"); 并使用它：
function btn(){ var field = $(this).data("field") alert(field.i) }
HTML
function btn(){ var field = $(this).data("field") alert(field.i) } // it doesn't work
如何在JavaScript中使用数据？
我想扩展Derek的评论 ，以及其他一些答案，以解决这个亟待解决的问题。
好的，但我怎么用呢？
data- *系列属性设计用于将一组数据作为属性存储在HTML元素上，并且它以这样的方式设计，这样您就不必自己明确地处理数据到JSON转换或存储所有数据在一个属性中。
不是将所有数据存储在单个data- *属性中，而是将数据存储在各个属性中，如下所示：
...
然后，当您需要检索数据时，可以使用简单的JavaScript命令一次性检索所有数据：
var userObj = document.getElementById("wrapper").dataset; console.info("user id = " + userObj.id); // prints "12345" console.info("name = " + userObj.name); // prints "James" console.info("role = " + userObj.role); // prints "developer"
正如您所看到的，非数据 – *属性（如id和class）不包含在数据集中，这使得仅提取数据本身变得容易。
此外，userObj类似于纯JavaScript对象，我可以通过对其进行字符串化来确认：
console.info("Stringified JSON object = " + JSON.stringify(userObj)); // prints '{"id":12345,"name":"James","role":"developer"}'
但是，事实上，对象不是一个真正的JavaScript对象，而实际上是一个DOMStringMap ，它在嵌套数据时有局限性，我们将在下面看到：
void setDataAttr（
在DOMString prop中，
在DOMString值
）;参数
支柱
要设置其值的属性。
值
该物业的新价值。
请注意，上面的值是DOMString，而不是对象。
在您的情况下，您将所有数据作为单个字符串化JSON对象存储在名为data-field的单个data- *字段中。 这不是不正确的，但它略有不同，可能会为您带来更多的工作。 例如，它在可读性方面可能具有不同的优点和缺点，以及将字符串转换为对象的额外工作。
在您的情况下，要提取数据，您需要这样做：
var userString = document.getElementById("user").dataset.field;
除此之外，我们开始在这个方法中看到漏洞。 dataset.field值不是第一个示例中的对象; 相反，它是一个字符串，我们必须自己将它转换为一个对象：
var userObj = JSON.parse(userString);
现在我们可以访问data-field表示的数据的属性：
console.info("name = " + userObj.name); // prints the name "James"
与可以包含嵌套JSON对象的常规JSON对象不同，DOMStringMap是一个包含键/值对的对象，其中值都是字符串。 简而言之，值内的任何嵌套对象都表示为字符串，而不是对象，这意味着它们必须单独转换为对象。
同样，这不是一件坏事，但它表明将对象存储在单个元素中可能更好地保留用于更复杂的数据结构，其中对象表示不仅仅是一个深度。 在这种情况下，我们必须从字符串转换为JSON，但在这种情况下我们有充分的理由这样做，因为引擎不会在一个嵌套级别之外为我们做这些转换。
如果您更喜欢Firefox，请尝试自行从Chrome JavaScript控制台或Firebug控制台操作数据。 控制台允许我们实时使用不同的技术，并更好地了解某个function应该如何工作。 希望这可以帮助！
如果你想要一个与你创建的按钮具有相同数据的按钮的html，你将不得不使用html5数据属性。 即
并阅读它
function btn(){ var field = $('button').data("field"); alert(field.i)} }
与普通的js
function btn(){ var field = JSON.parse(document.querySelector('button').getAttribute("data-field")); alert(field.i)} }
使用.dataset ：
document.querySelector('button').dataset.field
并非所有浏览器都支持此function，因此您可能需要查找polyfill（或使用jQuery）。
使用此JavaScript。
要么
像这样使用jQuery。