13

我们将 HTML5 的data-*属性用于我们的一些客户端交互设置。jQuery 使用这些来做它的事情。

问题是进来的 HTML 可能会有所不同。显然这是应该解决的问题，但不幸的是，我并不总是控制正在生成的 HTML。

问题：

鉴于这两个标签：

<a data-sampleAttributeName="example">

<a data-sampleattributename="example">

有没有一种聪明的方法可以将它们视为一回事？

我想出的最好的是这样的：

var theAttribute = ($myobject).data('sampleAttributeName');

if (($myobject).data('sampleAttributeName')){
    theAttribute = ($myobject).data('sampleAttributeName')
} else {
    theAttribute = ($myobject).data('sampleattributename')
}

我可以把它变成一个函数，我可以将 camelCase 版本传递给并检查两者。我只是想知道 jQuery 中是否有一个更简洁的内置功能来忽略data(or attr) 值的大小写。

4

3 回答 3

28

对于此处给出的两种变体，您应该使用

.data('sampleattributename')

驼峰式 ( .data('sampleAttributeName')) 用于属性如下时：

<a  data-sample-attribute-name="something">Anchor</a>

检查这个jsfiddle

于 2011-10-03T23:04:02.960 回答
2

对于您感兴趣的每个元素，遍历 .data() 返回的对象并通过 toLowerCase() 更新该元素的 jQuery 数据 - 键。

$('a').each(function ()
{
    var $this = $(this),
        data = $this.data(),
        kTemp;

    for (var k in data)
    {
        kTemp = k.toLowerCase();
        if (k !== kTemp)
        {
            $this.data(kTemp, data[k]).removeData(k);
        }
    }
});
于 2011-10-03T22:56:01.150 回答
0

我有很多在 html 中有数据属性的遗留代码。有些属性包含破折号，有些则混合大小写。为了支持 html5 数据属性的 w3c 规范，以及 jQuery 1.6 中对 $.data 的更改，我创建了一个函数来将数据属性名称字符串转换为它们的 w3c 等效项；这意味着像“data-fooBar”这样的属性将被转换为“foobar”，而“data-foo-barBaz”将被转换为“fooBarbaz”。我需要这样的东西来添加到我的 $.data() 调用者中，这样我就不必更新现有的 html，这可能涉及数据库更新，并且找到所有数据属性并将它们更新为一场噩梦符合 w3c 规范。这个函数是专门为在jquery库中使用而设计的，并检查jquery版本，仅替换 jQuery 版本 1.6+ 的破折号（+驼峰式）（无论 jQuery 版本如何，所有数据属性都将转换为小写）。该函数可以很容易地在没有 jQuery 的情况下转换为工作。

用法： 

var html5data = $(this).data(w3cdatakey('foo-barBaz')); //same as $.data('fooBarbaz');

看看这个小提琴： jsfiddle example

于 2012-08-14T20:56:48.497 回答