jquery无法获取数据属性值答案

【问题标题】：jquery can't get data attribute valuejquery无法获取数据属性值
【发布时间】：2017-08-21 11:29:47
【问题描述】：

我正在尝试在 jQuery 中设置一个变量。该值应该在按钮的单击事件上设置。 onclick 事件触发，但 x10Device 变量仍为 undefined。

我在 jquery 1.7.1 上。

jQuery:

 $x10Device = $(this).data("X10");

HTML：

<button class="toggleStatus" data-X10="C5">

我看不出有什么问题。

【问题讨论】：

什么版本的jQuery？
信息不足。请分享更多代码。
jQuery 可能会将属性名称转换为全小写，试试：$(this).data("x10");
为什么回答不清楚？？
我投票决定重新提出问题。很清楚要问什么，问题收到的流量表明这是一个相当普遍的问题。

标签： jquery html

【解决方案1】：

jQuery 的data() 方法可以让您访问data-* 属性，但是，它破坏了属性名称的大小写。你可以使用这个：

$('#myButton').data("x10") // note the lower case

或者，您可以使用attr() 方法，这样可以保留您的情况：

$('#myButton').attr("data-X10")

在这里尝试两种方法：http://jsfiddle.net/q5rbL/

请注意，这些方法并不完全等效。如果您要更改元素的data-* 属性，则应使用attr()。 data() 最初会读取一次该值，然后继续返回一个缓存副本，而attr() 每次都会重新读取该属性。

请注意，jQuery 还将属性名称中的连字符转换为驼峰式大小写（source -- 即data-some-data == $(ele).data('someData')）。这两种转换都符合 HTML 规范，该规范规定自定义数据属性不应包含大写字母，并且在 dataset 属性 (source) 中的连字符将采用驼峰式大小写。 jQuery 的data 方法只是在模仿/符合这种标准行为。

文档

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

【讨论】：

关于数据属性区分大小写的好信息，+1
还有 .data()，当你使用像 $(this).data("giveMeMyBananas") 这样的 Camel Case 时，它会检索 data-give-me-my-bananas="的 html 数据不！”
添加了注释，@BabyAzerty，以及它的部分原因（HTML 规范规定自定义属性不包含大写字母）
把所有东西都变成小写了，而且工作起来就像一个魅力！谢谢
@JasonMillington 很高兴为您提供帮助！查看我写的关于attr() 与data() 的注释——无论如何，你可能对attr() 更感兴趣，这取决于你将如何使用这些属性。

【解决方案2】：

哎呀。这是工作数据名称区分大小写数据-x10

var variable = $('#myButton').data("x10"); // 我们获取自定义数据属性的值

【讨论】：

【解决方案3】：

确保检查与按钮单击相关的事件是否没有作为按钮内的图标标记 (<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');
});

【讨论】：

【解决方案4】：

使用普通的 javascript 方法

$x10Device = this.dataset("x10");

【讨论】：

【解决方案5】：

将大小写更改为所有小写字母对我有用。

【讨论】：

【解决方案6】：

您可以根据需要更改选择器和数据属性！

 <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"));
});

下面是工作示例：https://jsfiddle.net/ed5axgvk/1/

【讨论】：