jQuery camel-case映射从“data-”属性名称到“.data（）”键

如果在元素上放置“data-”属性：

然后你可以通过jQuery“.data（）”方法获取值：

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

该库使用一致的camel-case转换器来处理带有嵌入破折号的属性名称：

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

camel-case转换器是一个jQuery“全局”函数：

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

但是，当属性名称的名称包含由短划线包围的单个字母时，这一切都会中断：

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

这有点奇怪，因为：

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

那有什么不对？ 我认为它与用于转向另一个方向的机制有关，将已经驼峰式的名称转换回虚线forms。 但是我无法在代码中找到它。

似乎在1.6.2和1.6.3中相同。 （顺便说一句，“image-x-offset”forms可用于获取数据。）

编辑 – 如果，对于给定的元素，您在尝试驼峰forms之前通过虚线forms访问，那么它可以工作（并告诉我这绝对是一个错误 🙂

Answer 1

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

 rmultiDash = /([az])([AZ])/g; 

…… 这里使用的 ：

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

…导致：

 data-image-xoffset 

…代替：

 data-image-x-offset 

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

因此，当您使用虚线版本时，当它查找属性时，它会在不需要转换的情况下找到它，然后将camelCase版本添加到jQuery.cache的元素数据中。

随后的尝试将起作用，因为现在存在正确的camelCase，因此它不再尝试将其作为属性获取，因此不再需要错误的正则表达式。