javascript - jQuery 驼峰式映射从 "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"));

驼峰式转换器是一个 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”形式来获取数据。)

编辑 - 如果对于给定的元素，您在尝试使用驼峰式形式之前通过虚线形式进行访问，那么它就可以工作(这告诉我，这个绝对是 bug :-)

Answer 1

你是对的。问题似乎出在他们用于从驼峰命名法转换为虚线命名法的正则表达式上。

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 中的元素数据中。

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