如何使用 data- 属性通过 jQuery 传递值？答案

【问题标题】：How do I use the data- attribute to pass values with jQuery?如何使用 data- 属性通过 jQuery 传递值？
【发布时间】：2013-08-11 00:16:26
【问题描述】：

我想了解更多关于在 HTML 中使用 data-* 属性及其在 jQuery 中的使用。我只是想用 .data() 和或 .attr() 检索 data-attribute-name="a value" 两者都使用以下方法记录为“未定义”。如何使用 data- 属性通过 jQuery 传递值？

HTML

<li class="als-item">
    <a data-loc-subject="test value">
        <img src="clock.png"/>
    </a>Beach
</li>

$( ".als-item" ).click(function(e) {
e.preventDefault();

var data = $('.als-item').data('data-loc-subject');
var attrmethod = $('.als-item').attr('data-loc-subject');
    console.log(data);
    console.log(attrmethod);
});

jsFiddle

【问题讨论】：

第二个应该工作，第一个，不是那么多。如果没有工作，您可能还必须发布 HTML 以便我们发现问题。
请注意，.data已经考虑了“数据-”，并应用了一些其他“技巧”。此外，在点击内部，$(this).. 就足够了。请发布最小的jsfiddle.net 测试用例以重现该行为。
刚刚做了。还有未定义的...嗯
您定位错误的元素，发布了答案。

标签： jquery

【解决方案1】：

您无需在数据名称前加上单词data。

$( ".als-item > a" ).click(function(e) {
    e.preventDefault();

    var data = $('.als-item').data('loc-subject');
    var attrmethod = $('.als-item').attr('data-loc-subject');
        console.log(data);
        console.log(attrmethod);
});

http://jsfiddle.net/thinkingmedia/c6kYT/

两者的区别

您可以使用数据属性将数据值硬编码到 DOM 中。例如；

<a href="#" data-john="smith">Something</a>
console.log($("a").data("john"));
// will output "smith"

之所以有效，是因为 jQuery 对待数据的方式与对待属性的方式不同。它会首先检查 DOM 元素是否包含名为 data-john 的属性，以及是否返回该值。如果它不包含该属性，它将查看附加到 DOM 元素的内部数据。如果该数据存在，它将返回该值。

当您使用 jQuery 设置数据时，它不会更新 DOM 元素的属性。它将数据附加到内部的 DOM 元素。因此$("a").data("house","on fire"); 会将字符串“on fire”存储在标签“house”下的DOM 元素中。如果您使用 DOM 检查器查看 HTML。不会有新的属性分配给名为data-house 的元素。

这与使用jQuery.attr() 方法不同。直接修改 DOM 元素的属性。

编辑： 需要注意的是，为了访问某些 HTML 元素的数据属性，您必须通过某些选择器（id、class 等）选择元素。您不能将“this”传递给元素上的任何方法属性并使用该参数来访问数据。它会产生一个未定义的。

HTML

<li class="als-item">
    <button onclick="somefunc1(this)" id="mybutton" 
        data-loc-subject="test value">My Button</button>
</li>

function somefunc1(button) {
  // this alert prints "undefined"
  alert($(this).data('loc-subject'));
  // this will print "test value"
  alert($('#mybutton').data('loc-subject'));
}

Plunker

【讨论】：

另外，data() 仅在内部data 对象没有该键时才第一次检索该属性，之后它使用内部值。这一点很重要，因为任何更新实际属性的东西都不会更新内部 data 对象，因此一致性是关键。
您能详细解释一下内部数据和内部价值吗？此外，似乎 .data() 可以取代我对 JS 的 getElementById() 的使用？

【解决方案2】：

"data-" 属性前缀应该在你的.data() 调用中被去掉，所以假设：

<span class="als-item" data-loc-subject="foo">ohai</span>

它将通过以下方式检索：

console.log($(".als-item").data("loc-subject"));

【讨论】：

【解决方案3】：

<div id="someID" attr1="this is attr 1" data-attr-1="data attribute 1"></div>

你可以找到任何元素属性使用

$("#someID").attr('attr1') [or] $("#someID").attr('data-attr-1');

根据元素是否具有属性来定位，你可以这样做：

$("[attr1]") or $("[attr1='this is attr 1']") ，它将返回元素（不是属性值）

【讨论】：

【解决方案4】：

根据你的情况设置数据属性

 <a id="edit" data-lan="my-data" onclick="onEdit(this)">Edit</a>

    function onEdit(obj) {
     console.log(this.getAttribute("data-lan")); //my-data
    }

【讨论】：