jQuery camel-case映射从"data-"属性名称到".data()"键

Question

如果在元素上放置"data-"属性:

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

然后你可以通过jQuery".data()"方法获取值:

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

该库使用一致的驼峰转换器来处理带有嵌入破折号的属性名称:

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

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

camel-case转换器是一个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中相同.(顺便说一下,"image-x-offset"形式可用于获取数据.)

编辑 - 如果,对于给定的元素,您在尝试驼峰形式之前通过虚线形式访问,那么它可以工作(并告诉我这绝对是一个错误 :-)

Answer 1

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

rmultiDash = /([a-z])([A-Z])/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现在存在,因此它不再尝试将其作为属性,因此不再需要错误的正则表达式.