jquery无法获取数据属性值

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变量仍未定义。

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.

我看不出有什么问题。

6 个解决方案

#1

124

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 change the 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 dataset property (source). jQuery's data method is merely mimicking/conforming to this standard behavior.

请注意，jQuery还会将属性名称中的连字符转换为camel case（source - 即data-some-data == $（ele）.data（'someData'））。这两个转换都符合HTML规范，该规范规定自定义数据属性不应包含大写字母，并且连字符将在数据集属性（源）中嵌入。 jQuery的数据方法仅仅是模仿/符合这种标准行为。

Documentation

文档

data - http://api.jquery.com/data/
数据 - http://api.jquery.com/data/
attr - http://api.jquery.com/attr/
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
HTML语义和结构，自定义数据属性 - http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute

#2

Iyap . Its work Case sensitive in data name data-x10

Iyap。其工作区分大小写数据名称data-x10

var variable = $('#myButton').data("x10"); // we get the value of custom data attribute

var variable = $（'＃myButton'）。data（“x10”）; //我们获取自定义数据属性的值

#3

Use plain javascript methods

使用普通的JavaScript方法

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

#4

Changing the casing to all lowercases worked for me.

将套管更换为所有小箱都适合我。

#5

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/

#6

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.

确保检查与按钮单击相关的事件是否未作为图标标记（

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

#1

124