我的网页上有一个按钮：
<button class="slideToggle" data-slideToggle="slider">SlideToggle</button>
单击此按钮时，我尝试使用以下代码访问存储在data-slideToggle属性中的数据，但我什么都没得到。
$('body').on('click', '.slideToggle', function(){
alert($(this).data('slideToggle'));
});
但是当我使用时它会起作用：
alert($(this).attr('data-slideToggle'));
当我使用camel-case数据属性时会发生此问题。我是HTML5和jQuery的新手，我无法弄清楚它出了什么问题。
答案 0 :(得分：2)
因为那不是你应该如何使用它。您只能使用小写属性，这就是为什么它不适合您。
更改<button class="slideToggle" data-slideToggle="slider">SlideToggle</button>
到
<button class="slideToggle" data-slidetoggle="slider">SlideToggle</button>
并像alert($(this).data('data-slidetoggle'));
attr适用于任何自定义属性，因此它也适用于此，但data有一些规则要遵循。
Spec说
自定义数据属性是没有名称空间的名称空间中的属性 以字符串＆＃34开头;数据 - ＆＃34;，后面至少有一个字符 连字符，与XML兼容，不包含大写ASCII字母。
答案 1 :(得分：2)
请阅读本文
data- *属性由两部分组成：
用作
<button class="slideToggle" data-slidetoggle="slider">SlideToggle</button>
答案 2 :(得分：2)
之前的所有答案都错过了一件事：您实际上可以使用现有的HTML结构。考虑一下：
$('body').on('click', '.slideToggle', function(){
alert($(this).data('slidetoggle')); // wait, what?
});
要了解此处发生的情况，检查jQuery source code中的以下几行至关重要：
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的属性中执行不区分大小写的搜索。因此，您甚至可以将其写为......
<button data-sLiDeToGgLe="l33t!"></button>
......它仍然是would have worked。 ）
尽管如此，我还是建议遵循数据集API惯例，将基于camelCased complexWord的数据属性分解为带连字符的complex-word表示法。
答案 3 :(得分：1)
实际上当你添加camalCase属性时;在浏览器上它被转换成小写;所以你必须通过
访问它$(this).attr('data-slidetoggle')
并按照w3c学校（http://www.w3schools.com/tags/att_global_data.asp）
data- *属性由两部分组成：