将"数据-"属性名称转换为".data()"键的jQuery驼峰映射

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 :-)

- Pointy

---

jQuery错误报告在这里：http://bugs.jquery.com/ticket/10194（由@Pointy提交） - gen_Eric

这是针对你的jsFiddle：http://jsfiddle.net/hJDLY/1/。看起来很整洁，好像OP提交了那个错误报告！:-P - numbers1311407

谢谢大家！这个问题占用了我的早晨 :/ - Pointy

看到好的一面，你正在为jQuery做出贡献！很奇怪，看源代码并没有立即显而易见的原因。它使用相同的驼峰函数获取/设置缓存值。https://github.com/jquery/jquery/blob/1.6.2/src/data.js - numbers1311407

你也可以直接使用 $('#x').data('image-x-offset') 来获取数据。似乎不强制使用驼峰式命名法。看起来在 jQuery 1.7 中已经修复了，所以工作做得很好。 - zuallauz

Answer 1

你说得对。问题似乎与将驼峰命名法转换为破折号的正则表达式有关。

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/

当您使用破折号版本时，查找属性时会直接找到它，而无需进行转换，然后将驼峰命名法版本添加到jQuery.cache中的元素数据中。

随后的尝试将正常工作，因为正确的驼峰命名法现在已经存在，因此不再尝试将其作为属性获取，因此也不再需要有缺陷的正则表达式。

- user113716

---

我之前看到过这个，但是在试图弄清楚它的确切作用时搞砸了——谢谢！ - Pointy