我想了解有关在 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>
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);
});
最佳答案
您不需要在数据名称前添加单词 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'));
}
关于jquery - 如何使用 data- 属性通过 jQuery 传递值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18167550/