Jquery 带有变量的HTML元素

在jQuery中，我可以创建一个包含数据的HTML元素：

$('<button onclick="btn()"></button>').data("field", { i: i, j: j }).appendTo("body");

HTML

函数btn（）{
变量字段=$（此）.data（“字段”）
警报（字段i）
}//它不起作用

---

如何在JavaScript中使用数据？

如果您希望按钮的html具有与您创建的按钮相同的可用数据，则必须使用html5数据属性。i、 e

<button data-field='{ "i": "thevalueofi", "j": "tthevalueofj" }'></button>

用简单的js

 function btn(){
        var field = JSON.parse(document.querySelector('button').getAttribute("data-field"));
        alert(field.i)}
 }

与：

并非所有浏览器都支持此操作，因此您可能需要查找polyfill（或使用jQuery）。

使用此javascript

<button type="button" id="mybutton" onclick="btn()" data-field= "{ i: thevalueofi, j: tthevalueofj }"></button>
<script>
 function btn(){
   var mydata = document.getElementById("mybutton").getAttribute("data-field");
    alert("data-field");
    // alert(mydata);
 }
</script>

函数btn（）{
var mydata=document.getElementById（“mybutton”）.getAttribute（“数据字段”）；
警报（“数据字段”）；
//警报（mydata）；
}

或

像这样使用jQuery

<button type="button" id="mybutton" onclick="btn()" data-field= "{ i: thevalueofi, j: tthevalueofj }"></button>
<script>
 function btn(){
   var mydata = jQuery("button#mybutton").attr("data-field");
    alert("data-field");
    // alert(mydata);
 }
</script>

函数btn（）{
var mydata=jQuery（“按钮#mybutton”）.attr（“数据字段”）；
警报（“数据字段”）；
//警报（mydata）；
}

我想在这里详细介绍一下，以及其他一些答案，以解决这个紧迫的问题

好的，但是我怎么用呢

data-*系列属性用于将一组数据作为属性存储在HTML元素上，其设计方式使您不必自己显式处理数据到JSON的转换，也不必将所有数据存储在单个属性中

不要将所有数据存储在单个data-*属性中，而是将数据存储在各个属性中，如下所示：

<div id="user" data-id="12345" data-name="James" data-role="developer" 
        class="users wrappers" >
     ...
</div>

如您所见，非data-*属性（如id和类）不包含在dataset中，这使得只提取数据本身变得很容易

此外，userObj类似于纯JavaScript对象，我可以通过字符串化来确认这一点：

console.info("Stringified JSON object = " + JSON.stringify(userObj)); 
    // prints '{"id":12345,"name":"James","role":"developer"}'

但是，老实说，该对象不是一个真正的JavaScript对象，而是一个实际的JavaScript对象，这在嵌套数据时有局限性，我们将在下面看到：

void setDataAttr（
在DOMString prop中，
在DOMString值中
);

参数

道具

要设置其值的属性

值

财产的新价值

请注意，上面的值是DOMString，而不是对象。

在您的例子中，您将所有数据作为一个单一的字符串化JSON对象存储在一个名为data field的data-*字段中。这是正确的，但有点不同，可能会给你带来更多的工作。例如，它在可读性方面可能有不同的优点和缺点，以及将字符串转换为对象的额外工作

在您的情况下，要提取数据，您需要执行以下操作：

<!-- Note the nested quotes. This is what it looks like in the Chrome Elements 
     inspector. In reality, the quotes inside must be escaped -->
<div id="user" data-field="{"id":"12345", "name":"James", "role":"developer"}" 
        class="users wrappers" >

var userString = document.getElementById("user").dataset.field;

现在我们可以访问数据字段表示的数据的属性：

console.info("name = " + userObj.name);  // prints the name "James"

与可以包含嵌套JSON对象的常规JSON对象不同，DOMStringMap是一个包含键/值对的对象，其中值都是字符串。简而言之，值中的任何嵌套对象都表示为字符串，而不是对象，这意味着它们必须单独转换为对象

同样，这不是一件坏事，但它表明将对象存储在单个元素中可能更好地保留给对象表示深度超过一级的更复杂的数据结构。在这种情况下，我们必须从字符串转换为JSON，但在这种情况下，我们有充分的理由这样做，因为引擎不会为我们完成这些转换，只需要一个嵌套级别

---

如果您更喜欢Firefox，请尝试从Chrome JavaScript控制台或Firebug控制台亲自操作数据。控制台允许我们实时地使用不同的技术，并对某个功能应该如何工作有更强烈的感觉。希望这有帮助

首先需要使用.attr（）读取属性，然后使用JSON.parse将字符串转换为JSON，然后像往常一样读取JSON的属性。哈哈，我该如何使用它？？你不认识杰克？如果我使用dataset，你不知道i'van+1 for 30k MusaI会出现语法错误：你知道为什么吗？@mplungjan你会出现语法错误，因为你的数据字段不是json。我今天也告诉过别人，将javascript内联到属性中是不好的做法。Musa同样正确，即使不使用分号，您也会丢失@mplungjan:@mplungjan，如果它是json

。getAttribute（'data-field'）

在不支持

。dataset

时也有效。请不要重复同样的问题。这是非常令人烦恼的，这不是如何在

数据字段中获得值的方法。。。看这个：嘿，巴拉特，你的意思是提醒数据本身，而不是简单地提醒硬编码文本“数据字段”？
<div id="user" data-id="12345" data-name="James" data-role="developer" 
        class="users wrappers" >
     ...
</div>

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"

console.info("Stringified JSON object = " + JSON.stringify(userObj)); 
    // prints '{"id":12345,"name":"James","role":"developer"}'

<!-- Note the nested quotes. This is what it looks like in the Chrome Elements 
     inspector. In reality, the quotes inside must be escaped -->
<div id="user" data-field="{"id":"12345", "name":"James", "role":"developer"}" 
        class="users wrappers" >

var userString = document.getElementById("user").dataset.field;

var userObj = JSON.parse(userString);

console.info("name = " + userObj.name);  // prints the name "James"