如何使用 data- 属性通过 jQuery 传递值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18167550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use the data- attribute to pass values with jQuery?
提问by Ben Racicot
I'd like to know more about using data-* attributes with HTML and its use within jQuery. I'm simply trying to retrieve data-attribute-name="a value" with .data() and or .attr()both are logging as 'undefined' with the following methods below. How do I use the data- attribute to pass values with jQuery?
我想了解更多关于在 HTML 中使用 data-* 属性及其在 jQuery 中的使用。我只是尝试使用 .data() 和或 .attr()检索 data-attribute-name="a value"两者都使用以下方法记录为“未定义”。如何使用 data- 属性通过 jQuery 传递值？
HTML
HTML
<li class="als-item">
<a data-loc-subject="test value">
<img src="clock.png"/>
</a>Beach
</li>
JS
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);
});
回答by Reactgular
You don't need to prefix the data name with the word data.
您不需要在数据名称前加上单词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/
http://jsfiddle.net/thinkingmedia/c6kYT/
The Difference Between The Two
两者的区别
You can hard code data value into the DOM using data attributes. For example;
您可以使用数据属性将数据值硬编码到 DOM 中。例如;
<a href="#" data-john="smith">Something</a>
console.log($("a").data("john"));
// will output "smith"
That works because jQuery treats data differently from attributes. It will firstcheck if the DOM element contains an attribute called data-john, and if it does return that value. If it does not contain that attribute it will look at internal data attachedto the DOM element. If that data exists it will return that value.
这是有效的，因为 jQuery 处理数据与属性不同。它将首先检查 DOM 元素是否包含一个名为 的属性data-john，以及它是否确实返回了该值。如果它不包含该属性，它将查看附加到 DOM 元素的内部数据。如果该数据存在，它将返回该值。
When you set data using jQuery it will not update the attributes of the DOM element. It will attach the data to the DOM element internally. Therefore $("a").data("house","on fire");will store the string "on fire" in the DOM element under a label "house". If you use the DOM inspector to look at the HTML. There will be no new attribute assigned to that element called data-house.
当您使用 jQuery 设置数据时，它不会更新 DOM 元素的属性。它将在内部将数据附加到 DOM 元素。因此$("a").data("house","on fire");将字符串“on fire”存储在标签“house”下的DOM元素中。如果您使用 DOM 检查器查看 HTML。不会有新属性分配给名为data-house.
That is different from using the jQuery.attr()methods. Which directly modify a DOM element's attributes.
这与使用jQuery.attr()方法不同。直接修改一个DOM元素的属性。
EDIT:Something to note is that in order to access the data attributes of some HTML element, you must select the element via some selector (id,class,etc). You cannot pass "this" to any method attribute on the element and use that argument to access the data. It will produce an undefined.
HTML
编辑：需要注意的是，为了访问某个 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
JS
function somefunc1(button) {
// this alert prints "undefined"
alert($(this).data('loc-subject'));
// this will print "test value"
alert($('#mybutton').data('loc-subject'));
}
回答by Dave Newton
The "data-"attribute prefix should be stripped off in your .data()call, so assuming:
该"data-"属性前缀应该在你被扒掉.data()调用，因此假设：
<span class="als-item" data-loc-subject="foo">ohai</span>
it would be retrieved via:
它将通过以下方式检索：
console.log($(".als-item").data("loc-subject"));
回答by d-_-b
<div id="someID" attr1="this is attr 1" data-attr-1="data attribute 1"></div>
You can find any element attribute using
您可以使用找到任何元素属性
$("#someID").attr('attr1') [or] $("#someID").attr('data-attr-1');
to target based on if the element has the attribute, you can do:
根据元素是否具有属性来定位，您可以执行以下操作：
$("[attr1]") or $("[attr1='this is attr 1']"), which will return the element (not the attribute value)
$("[attr1]") or $("[attr1='this is attr 1']")，这将返回元素（不是属性值）
回答by Kaushik shrimali
set the data attribute as per your condition
根据您的条件设置数据属性
<a id="edit" data-lan="my-data" onclick="onEdit(this)">Edit</a>
function onEdit(obj) {
console.log(this.getAttribute("data-lan")); //my-data
}
