jquery 使用连字符和区分大小写获取 HTML 5 数据属性

jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity

提问by Unknown

How to get data attributes using jquery .data()? In which case html5 data-*attributes converts to lowercase and camelcase? What are all the main rules to follow while using custom attributes to store data?

如何使用 jquery 获取数据属性.data()？在哪种情况下 html5data-*属性转换为小写和驼峰？使用自定义属性存储数据时要遵循的所有主要规则是什么？

<input type="button" class="myButton" value="click me" data-productId="abc"/>
<input type="button" class="myButton" value="click me" data-product-id="abc"/>
<input type="button" class="myButton" value="click me" data-PRODUCT-ID="abc"/>
<input type="button" class="myButton" value="click me" data-ProDUctId="abc"/>

回答by Unknown

HTML5 allows us to create our own custom attributes to store data. Custom attributes can be called anything we like, like variable names, but they need to be prepended with the word 'data', and words are separated by dashes. You could add "foo", "bar", and "foo bar" data attributes to an input like this:

HTML5 允许我们创建自己的自定义属性来存储数据。自定义属性可以叫任何我们喜欢的名字，比如变量名，但它们需要前面加上“数据”这个词，并且词用破折号分隔。您可以将“foo”、“bar”和“foo bar”数据属性添加到如下输入中：

<input type="button" class="myButton" value="click me" data-foo="bar" 
data-bar="baz" data-foo-bar="true">

jQuery's .data()method will give you access to data-*attributes.

jQuery 的.data()方法将使您能够访问data-*属性。

Using jQuery up to and including version 1.4, data attributes were case insensitive, therefore:

使用 jQuery 直到并包括 1.4 版，数据属性不区分大小写，因此：

<input type="button" class="myButton" value="click me" data-productId="abc"/>

would be accessible with

将可以访问

$('.myButton').data('productId');

jQuery 1.5 and 1.6

jQuery 1.5 和 1.6

However, changes in jQuery 1.5 and 1.6 mean that data attributes are now forced to lowercase, so:

但是，jQuery 1.5 和 1.6 中的更改意味着数据属性现在被迫小写，因此：

<input type="button" class="myButton" value="click me" data-productId="abc"/>

is only accessible with

只能访问

$('.myButton').data('productid');

Any data-*attributes become properties of the element's dataset object. The new property names are derived as follows:

任何data-*属性都成为元素的数据集对象的属性。新的属性名称派生如下：

• The attribute name is converted to all lowercase letters.
• The data-prefix is stripped from the attribute name.
• Any hyphen characters are also removed from the attribute name.
• The remaining characters are converted to CamelCase. The characters immediately following the hyphens removed in Step 3 become uppercase.

• 属性名称全部转换为小写字母。
• 该data-前缀从属性名称剥离。
• 任何连字符也将从属性名称中删除。
• 其余字符将转换为 CamelCase。紧跟在步骤 3 中删除的连字符之后的字符变为大写。

Notice that the original attribute name data-product-idhas been converted to productIdin the dataset object. The name conversion process must be accounted for when naming data-*attributes. Since the attribute names are converted to lowercase, it is best to avoid using uppercase letters. The following example shows how several attribute names translate to dataset properties.

请注意，原始属性名称data-product-id已productId在数据集对象中转换为。命名data-*属性时必须考虑名称转换过程。由于属性名称转换为小写，因此最好避免使用大写字母。以下示例显示了几个属性名称如何转换为数据集属性。

"data-productId"  translates to "productid"
"data-product-id" translates to "productId"
"data-PRODUCT-ID" translates to "productId"
"data-ProDUctId"  translates to "productid"

NOTE:

笔记：

• Custom data attributes are typically used to store metadata that aids/simplifies JavaScript code.
• An element can have any number of custom data attributes.
• Custom data attributes should only be used if a more appropriate element or attribute does not exist. For example, you should not create a custom “text description” attribute on an image. The existing altattribute is a better choice.
• The HTML5 specification clearly states data-*attributes should not be used by third party applications. This means that programs such as search engines should not rely on custom data attributes when preparing search results.

• 自定义数据属性通常用于存储有助于/简化 JavaScript 代码的元数据。
• 一个元素可以有任意数量的自定义数据属性。
• 仅当不存在更合适的元素或属性时，才应使用自定义数据属性。例如，您不应在图像上创建自定义“文本描述”属性。现有alt属性是更好的选择。
• HTML5 规范明确规定data-*第三方应用程序不应使用属性。这意味着搜索引擎等程序在准备搜索结果时不应依赖自定义数据属性。

Implementing custom attributes in HTML5 is not technically complex in itself, however the real difficulty is in choosing whether it is appropriate to use them in your own projects, and if so how to go about it efficiently. Finally, do remember that it's still a little early to start using the dataset approach for functions your pages rely on, so be sure to provide an alternative for non-supporting browsers.

在 HTML5 中实现自定义属性本身在技术上并不复杂，但真正的困难在于选择是否适合在您自己的项目中使用它们，以及如何有效地进行。最后，请记住，开始将数据集方法用于您的页面所依赖的功能还为时过早，因此请务必为不支持的浏览器提供替代方案。

DEMO

演示