为什么jQuery的。数据（）函数不访问HTML5驼峰数据属性

Question

我在我的网页有一个按钮：

<button class="slideToggle" data-slideToggle="slider">SlideToggle</button> 

当这个按钮被点击我试图访问存储数据通过使用下面的代码在data-slideToggle属性中，但是我什么也没得到。

$('body').on('click', '.slideToggle', function(){ 
    alert($(this).data('slideToggle')); 
}); 

，但它的工作原理，当我使用：

alert($(this).attr('data-slideToggle')); 

当我使用驼峰数据属性会出现此问题。我对HTML5和jQuery非常陌生，我无法弄清楚它出了什么问题。

Answer 1

以前所有的答案错过一两件事：你其实可以与现有的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默认执行元素的属性之间的不区分大小写搜索。因此，你甚至可以写来......

<button data-sLiDeToGgLe="l33t!"></button> 

...，它仍然would have worked。 ）

不过，我宁愿推荐遵循数据集API约定，将camel基于complexWord的数据属性划分为带有连字符的complex-word表示法。

Answer 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说

自定义数据属性是没有命名空间的名字 开始以字符串“数据 - ”，有连字符 后至少一个字符，是XML兼容的一个属性，不包含大写的ASCII字母。

Answer 3

其实当你添加camalCase属性;在浏览器上它被转换成小写;所以你必须通过

$(this).attr('data-slidetoggle') 

，并按照W3C学校（http://www.w3schools.com/tags/att_global_data.asp）

数据 - *属性由两个部分组成，以访问：

1. 属性名称不应包含任何大写字母和 的前缀必须至少有一个字符“data-”
2. 属性值可以是任何字符串

Answer 4

请仔细阅读本

• 数据 - *属性由两个部分组成：

  • 属性名称不应包含任何大写字母，以及后必须至少一个字符长前缀 “DATA-”
  • 该属性值可以是任意字符串

用作

<button class="slideToggle" data-slidetoggle="slider">SlideToggle</button>