jquery无法获取数据属性值

Question

我试图在jQuery中设置一个变量.该值应该在按钮的单击事件上设置.触发onclick事件但x10Device变量仍然存在undefined.

我在jquery 1.7.1.

jQuery的:

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

HTML:

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

我看不出有什么不对.

Answer 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还会将属性名称中的连字符转换为camel case(source - ie data-some-data == $(ele).data('someData')).这两个转换都符合HTML规范,该规范规定自定义数据属性不应包含大写字母,并且连字符将在dataset属性(源)中加入驼峰.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