为什么jQuery .data（）函数没有访问HTML5 camel-case数据属性

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'));

当我使用camel-case数据属性时会发生此问题。我是HTML5和jQuery的新手，我无法弄清楚它出了什么问题。

Answer 1

因为那不是你应该如何使用它。您只能使用小写属性，这就是为什么它不适合您。

更改<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字母。

Answer 2

请阅读本文

• data- *属性由两部分组成：

  • 属性名称不应包含任何大写字母，并且在前缀＆＃34;数据 - ＆＃34;
  之后必须至少有一个字符。
  • 属性值可以是任何字符串

用作

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

Answer 3

之前的所有答案都错过了一件事：您实际上可以使用现有的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表示法。

Answer 4

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

访问它

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

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

data- *属性由两部分组成：

1. 属性名称不应包含任何大写字母，以及 在前缀＆＃34;数据 - ＆＃34;
之后必须至少有一个字符
2. 属性值可以是任何字符串