13

data-*クライアント側のインタラクション設定の一部にHTML5の属性を使用しています。jQueryはこれらを使用して処理を実行します。

キャッチは、入ってくるHTMLが異なるかもしれないということです。明らかに、これは修正する必要のある問題ですが、残念ながら、作成されるHTMLを常に管理しているわけではありません。

質問：

これらの2つのタグを考えると：

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

これを、キャメルケースのバージョンを渡すだけで両方をチェックできる関数に変えることができます。data（またはattr）値の大文字と小文字を無視する、よりクリーンな組み込み機能がjQueryにあるかどうか疑問に思っていました。

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仕様、およびjQuery1.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の例

于 2012-08-14T20:56:48.497 に答える