如何使用data-属性通过jQuery传递值?
我想更多地了解如何在HTML中使用data- *属性及其在jQuery中的使用。 我只是尝试使用.data()和/或.attr()检索data-attribute-name =“a value” ,两者都使用以下方法记录为“undefined”。 如何使用data-属性通过jQuery传递值?
HTML
Beach
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
您不需要在数据名称前加上单词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中。 例如;
Something console.log($("a").data("john")); // will output "smith"
这是有效的,因为jQuery以不同于属性的方式处理数据。 它将首先检查DOM元素是否包含名为data-john
的属性,以及它是否返回该值。 如果它不包含该属性,它将查看附加到DOM元素的内部数据。 如果该数据存在,它将返回该值。
使用jQuery设置数据时,它不会更新DOM元素的属性。 它会在内部将数据附加到DOM元素。 因此$("a").data("house","on fire");
将字符串“on”存储在标签“house”下的DOM元素中。 如果使用DOM检查器查看HTML。 将不会为该元素分配名为data-house
新属性。
这与使用jQuery.attr()
方法不同。 这直接修改了DOM元素的属性。
编辑:需要注意的是,为了访问某些HTML元素的数据属性,您必须通过某个选择器(id,class等)选择元素。 您不能将“this”传递给元素上的任何方法属性,并使用该参数来访问数据。 它会产生一个未定义的。
HTML
JS
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-"
属性前缀,因此假设:
ohai
它将通过以下方式检索:
console.log($(".als-item").data("loc-subject"));
您可以使用找到任何元素属性
$("#someID").attr('attr1') [or] $("#someID").attr('data-attr-1');
要根据元素是否具有属性进行定位,您可以执行以下操作:
$("[attr1]") or $("[attr1='this is attr 1']")
,它将返回元素(不是属性值)