从“jQuery -”属性名到".data()“键的数据驼峰大小写映射
从“jQuery -”属性名到".data()“键的数据驼峰大小写映射
提问于 2011-09-03 00:37:48
如果将"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“形式来获取数据。)
编辑-对于给定的元素，如果在尝试驼峰大小写形式之前通过虚线形式进行访问，那么它可以工作(这告诉我这绝对是一个bug :-)
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-09-03 01:37:55
你是对的。问题似乎出在他们用来从camelCase转换为dashed的正则表达式上。
rmultiDash = /([a-z])([A-Z])/g;...as used here
var name = "data-" + key.replace( rmultiDash, "$1-$2" ).toLowerCase();...which的结果是：
data-image-xoffset...instead的地址：
data-image-x-offset演示： http://jsfiddle.net/TLnaW/
因此，当您使用虚线版本时，当它查找属性时，不需要进行转换就能找到它，然后将camelCase版本添加到jQuery.cache中的元素数据中。
随后的尝试将起作用，因为正确的camelCase现在在那里，因此它不再尝试将其作为属性获取，因此不再需要错误的正则表达式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7286607
复制相关文章
相似问题