为什么jQuery .data（）函数没有访问HTML5 camel-case数据属性
我的网页上有一个按钮：
单击此按钮时，我尝试使用以下代码访问存储在data-slideToggle属性中的数据，但我什么都没得到。
$('body').on('click', '.slideToggle', function(){ alert($(this).data('slideToggle')); });
但它在我使用时有效：
alert($(this).attr('data-slideToggle'));
当我使用camel-case数据属性时会发生此问题。 我是HTML5和jQuery的新手，我无法弄清楚它出了什么问题。
之前的所有答案都错过了一件事：您实际上可以使用现有的HTML结构。 考虑一下：
$('body').on('click', '.slideToggle', function(){ alert($(this).data('slidetoggle')); // wait, what? });
要了解这里发生的事情，检查jQuery源代码中的以下几行至关重要：
name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); data = elem.getAttribute( name );
请参阅，jQuery遵循数据集API的约定，将fooBar属性转换为元素属性的data-foo-bar名称。
在你的情况下，将'slideToggle'转换为'data-slide-toggle' – 显然你的HTML中没有这样的属性。
但是， data('slidetoggle')工作正常，因为默认情况下 getAttribute在Element的属性中执行不区分大小写的搜索。 因此，您甚至可能将其写为……
……它仍然有效 。 ）
不过，我宁愿建议遵循数据集API约定，将基于camelCased的complexWord数据属性分解为带连字符的complex-word表示法。
因为那不是你应该如何使用它。 您只能使用小写属性，这就是它不适合您的原因。
将更改为
并像alert($(this).data('data-slidetoggle'));一样访问它alert($(this).data('data-slidetoggle'));
attr适用于任何自定义属性，因此它也可以在那里工作，但data有一些规则要遵循。
规格说
自定义数据属性是无命名空间中的属性，其名称以字符串“data-”开头，连字符后至少有一个字符，与XML兼容，并且不包含大写ASCII字母。
请阅读这个
-
data- *属性由两部分组成：
- 属性名称不应包含任何大写字母，并且在前缀“data-”之后必须至少有一个字符。
- 属性值可以是任何字符串
用于
实际上当你添加camalCase属性时; 在浏览器上它被转换成小写; 所以你必须通过它访问它
$(this).attr('data-slidetoggle')
并按照w3c学校（ http://www.w3schools.com/tags/att_global_data.asp ）
data- *属性由两部分组成：
- 属性名称不应包含任何大写字母，并且在前缀“data-”之后必须至少有一个字符。
- 属性值可以是任何字符串