2

在 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 中使用数据？

4

4 回答 4

6

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

<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)}
 }
于 2013-04-03T05:28:12.710 回答
1

与.dataset：

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

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

于 2013-04-27T05:02:30.613 回答
1

我想扩展Derek 的评论，以及这里的其他一些答案，以解决紧迫的问题。

好的，但我该如何使用它？

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"

如您所见，非 data-* 属性，如 id 和 class，不包含在数据集中，这使得仅提取数据本身变得容易。

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

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

然而，说实话，这个对象并不是真正的 JavaScript 对象，而是一个DOMStringMap，它在嵌套数据方面有局限性，我们将在下面看到：

void setDataAttr（
  在 DOMString 属性中，
  在 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 控制台自己操作数据。控制台允许我们实时使用不同的技术，并对某个功能应该如何工作有更强烈的感觉。希望这可以帮助！

于 2013-04-27T19:15:17.973 回答
0

使用这个 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>

或者

像这样使用 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>
于 2013-04-27T05:56:07.473 回答