2011-09-02 55 views
19

如果你把一个‘数据 - ’属性的元素:jQuery的驼峰映射“数据()”键

<div id='x' data-key='value'> 

然后你就可以用价值jQuery的“数据()”方法:

alert($('#x').data('key')); // alerts "value" 

库使用属性名称一致的骆驼情况下转换器的嵌入式破折号:

<div id='x' data-hello-world="hi"> 

alert($('#x').data("helloWorld")); 

骆驼 - 案例转换器是一个jQuery的“全球性”的功能:

alert($.camelCase("hello-world")); // alerts "helloWorld" 

然而这一切都发生故障时的属性名称有一个名字与一个单个字母破折号包围:

<div id='x' data-image-x-offset='50px'> 

alert($('#x').data('imageXOffset')); // undefined 

这是一个有点古怪,因为:

alert($.camelCase('image-x-offset')); // "imageXOffset" 

那么,怎么了?我认为这与用于执行其他方向的机制有关,将已经骆驼大小写的名称转换回虚线形式。但是我无法在代码中找到它。

似乎在1.6.2中与1.6.3中一样。 (形式为“图像x偏移量”可以用来获取数据,顺便说一句。)

编辑 —如果对于一个给定的元素,通过虚线形式之前访问企图的骆驼 - 它的作品(并告诉我,这绝对是一个bug :-)

+1

jQuery bug报告在这里:http://bugs.jquery.com/ticket/10194(由@Pointy提交) –

+0

jsFiddle for you:http://jsfiddle.net/hJDLY/1/。整洁,它看起来像OP做错误报告!:-P – numbers1311407

+0

谢谢大家!这吃了我的早上:/ – Pointy

回答

14

你是对的。这个问题似乎与他们用于从camelCase转换为虚线的正则表达式有关。

rmultiDash = /([a-z])([A-Z])/g; 

... as used here

var name = "data-" + key.replace(rmultiDash, "$1-$2").toLowerCase(); 

...这会导致:

data-image-xoffset 

...而不是:

data-image-x-offset 

演示:http://jsfiddle.net/TLnaW/

因此,当您使用虚线版本时,当它查找属性时,会发现它不需要转换,然后将驼峰版本添加到jQuery.cache中的元素数据。

随后的尝试将会工作,因为正确的camelCase现在在那里,所以它不再试图将它作为一个属性,因此不再需要错误的正则表达式。

+1

当我看到它时,我盯着它看,但是当我试图弄清它到底会做什么时,我会大声疾呼 - 谢谢! – Pointy