jQuery jquery无法获取数据属性值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17351282/
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
jquery can't get data attribute value
提问by Jason Millington
I am trying to set a variable in jQuery. The value is supposed to be set on the click event of the button. The onclick event fires but the x10Device variable remains undefined.
我正在尝试在 jQuery 中设置一个变量。该值应该在按钮的单击事件上设置。onclick 事件触发，但 x10Device 变量仍然存在undefined。
I am on jquery 1.7.1.
我在 jquery 1.7.1 上。
jQuery:
jQuery：
$x10Device = $(this).data("X10");
HTML:
HTML：
<button class="toggleStatus" data-X10="C5">
I can't see what's wrong.
我看不出有什么问题。
回答by Chris Baker
jQuery's data()method will give you access to data-*attributes, BUT, it clobbers the case of the attribute name. You can either use this:
jQuery 的data()方法将让您访问data-*属性，但是，它破坏了属性名称的大小写。你可以使用这个：
$('#myButton').data("x10") // note the lower case
Or, you can use the attr()method, which preserves your case:
或者，您可以使用attr()保留案例的方法：
$('#myButton').attr("data-X10")
Try both methods here: http://jsfiddle.net/q5rbL/
在这里尝试这两种方法：http: //jsfiddle.net/q5rbL/
Be aware that these approaches are not completely equivalent. If you will changethe data-*attribute of an element, you should use attr(). data()will read the value once initially, then continue to return a cached copy, whereas attr()will re-read the attribute each time.
请注意，这些方法并不完全等效。如果要更改data-*元素的属性，则应使用attr(). data()最初将读取该值一次，然后继续返回缓存副本，而attr()每次都会重新读取该属性。
Note that jQuery will also convert hyphens in the attribute name to camel case (source-- i.e. data-some-data == $(ele).data('someData')). Both of these conversions are in conformance with the HTML specification, which dictates that custom data attributes should contain no uppercase letters, and that hyphens will be camel-cased in the datasetproperty (source). jQuery's datamethod is merely mimicking/conforming to this standard behavior.
请注意，jQuery 还会将属性名称中的连字符转换为驼峰式 ( source-- ie data-some-data == $(ele).data('someData'))。这两种转换都符合 HTML 规范，该规范规定自定义数据属性不应包含大写字母，并且连字符在dataset属性 ( source)中将采用驼峰式大小写。jQuery 的data方法只是模仿/符合这个标准行为。
Documentation
文档
data- http://api.jquery.com/data/attr- http://api.jquery.com/attr/- HTML Semantics and Structure, custom data attributes - http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute
data- http://api.jquery.com/data/attr- http://api.jquery.com/attr/- HTML 语义和结构，自定义数据属性 - http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute
回答by Indra
Iyap . Its work Case sensitive in data name data-x10
雅普。它的工作 数据名称 data-x10 区分大小写
var variable = $('#myButton').data("x10");// we get the value of custom data attribute
var variable = $('#myButton').data("x10");// 我们获取自定义数据属性的值
回答by Marvin Glenn Lacuna
Changing the casing to all lowercases worked for me.
将大小写更改为所有小写字母对我有用。
回答by curiousBoy
You can change the selector and data attributes as you wish!
您可以根据需要更改选择器和数据属性！
<select id="selectVehicle">
<option value="1" data-year="2011">Mazda</option>
<option value="2" data-year="2015">Honda</option>
<option value="3" data-year="2008">Mercedes</option>
<option value="4" data-year="2005">Toyota</option>
</select>
$("#selectVehicle").change(function () {
alert($(this).find(':selected').data("year"));
});
Here is the working example: https://jsfiddle.net/ed5axgvk/1/
这是工作示例：https: //jsfiddle.net/ed5axgvk/1/
回答by Everton Z. P.
Make sure to check if the event related to the button click is not propagating to child elements as an icon tag (<i class="fa...) inside the button for example, so this propagation can make you miss the button $(this).attr('data-X10')and hit the icon tag.
确保检查与按钮单击相关的事件是否没有作为<i class="fa...按钮内的图标标签 ( )传播到子元素，例如，这种传播可能会让您错过按钮$(this).attr('data-X10')并点击图标标签。
<button data-x10="C5">
<i class="fa fa-check"></i> Text
</button>
$('button.toggleStatus').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$(event.currentTarget).attr('data-X10');
});
回答by Yana Agun Siswanto
Use plain javascript methods
使用普通的 javascript 方法
$x10Device = this.dataset("x10");
