Question

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

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

并使用它：

function btn(){
    var field = $(this).data("field")
    alert(field.i)
}

HTML

<button onclick="btn()" data-field= "{ i: thevalueofi, j: tthevalueofj }"></button>

function btn(){
    var field = $(this).data("field")
    alert(field.i)
} // it doesn't work

如何在JavaScript中使用数据？

Answer 1

如果您想要一个与您创建的按钮具有相同数据的按钮的html，则必须使用html5数据属性。即。

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

并阅读

 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)}
 }

Answer 2

使用.dataset：

document.querySelector('button').dataset.field

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

Answer 3

我想扩展Derek's comment，以及其他一些答案，以解决这个问题。

好的，但我怎么能用呢？

data- *系列属性设计用于将一组数据作为属性存储在HTML元素上，并且它以这样的方式设计，这样您就不必自己明确地处理数据到JSON转换或存储单个属性中的所有数据。

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

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

然后，当您需要检索数据时，可以使用简单的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- *字段中。这不是不正确的，但它略有不同，可能会为您带来更多的工作。例如，它在可读性方面可能有不同的优点和缺点，以及将字符串转换为对象的额外工作。

在您的情况下，要提取数据，您需要这样做：

<!-- 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;

除此之外，我们开始在这个方法中看到漏洞。 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控制台操作数据。控制台允许我们实时使用不同的技术，并更好地了解某个功能应该如何工作。希望这可以帮助！

Answer 4

使用此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>

OR

像这样使用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>

带有变量的HTML元素

HTML

4 个答案: