Question

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

HTML

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

JS

$( ".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

Answer 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>

<强> JS

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

Plunker

Answer 2

应在"data-"来电中删除.data()属性前缀，假设：

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

将通过以下方式检索：

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

Answer 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']")，它将返回元素（不是属性值）

Answer 4

根据您的条件设置数据属性

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

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

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

4 个答案:

两者之间的区别