44

如何使用 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"/>
4

2 回答 2

105

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

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

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

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

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

可以通过

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

jQuery 1.5 和 1.6

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

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

只能通过

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

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

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

请注意，原始属性名称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"

笔记：

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

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

演示

于 2014-03-31T04:24:46.707 回答
-1

“data-product-id”翻译成“productId”为我工作。

于 2020-11-18T18:36:42.147 回答