4

jQuery$("..").data("key", value)メソッドはdata-key属性が存在する場合、それを設定しますか？

AdamFreemanのProjQueryは、次のように述べています。

ヒントdataメソッドは、値を設定するときにデータ属性も考慮に入れます。[sic] productなどのキーを指定すると、dataメソッドは、data-productなどの対応するHTML5データ属性があるかどうかを確認します。ある場合は、指定した値が属性に割り当てられます。そうでない場合、データはjQueryによって内部的に保存されます。

しかし、私はそうではないと思いました、そして私が実行したテストはそうではないことを意味します。（正誤表のセクションを確認しましたが、何もありません）

完全なコードは以下のとおりですが、メソッドを呼び出してdata-name属性を設定するとattr、属性値が変更され、[chrome要素]タブに表示され、に取得されnewValueます。dataメソッドで設定すると、どちらの条件も満たされません。data()を使用すると、値が存在する場合でも、常に内部で値が設定され、属性には設定されないように見えます。

残念ながら、ドキュメントでhtml5データ属性についてのみ言及されているのは、キーのみを受け取り、付随する値を返すデータメソッドのセクションです。の説明でdata("key", value)は、html5データ属性についてはまったく言及されていないようです。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>

    <script type="text/javascript">
        $(function () {
            var oldValue = $("#d").data("name");
            alert("old value " + oldValue);

            $("#d").data("name", "Adam");
            //$("#d").attr("data-name", "Adam");

            var newValue = $("#d").attr("data-name");
            alert("new value " + newValue);
        });
    </script>
</head>
<body>
    <div id="d" data-name="none"></div>
</body>
</html>
4

4 に答える 4

2

アダム・フリーマンの説明は間違っているか、少なくとも完全には正確ではないと思います。

jQueryのドキュメントによると：

jQuery 1.4.3以降、HTML5データ属性はjQueryのデータオブジェクトに自動的に取り込まれます。

これは、jQueryが実際の属性の値をオーバーライドするのではなく、これらの属性を独自の内部表現にプルすることを意味します。

コードをざっと見てみると、同じことがわかります。

于 2012-04-16T21:55:09.953 に答える
1

jQueryの.data（）メソッドのドキュメントによると：

Internet Explorerではexpandoプロパティを介してデータを添付できないため、この方法では現在、XMLドキュメントにデータを設定するためのクロスプラットフォームサポートが提供されていないことに注意してください。

于 2012-04-16T21:55:28.960 に答える
1

そこにある場合はifを使用しdata=、エラーをスローしないようです。

あなた自身を見てください：

function dataAttr( elem, key, data ) {
    // If nothing was found internally, try to fetch any
    // data from the HTML5 data-* attribute
    if ( data === undefined && elem.nodeType === 1 ) {

        var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();

        data = elem.getAttribute( name );

        if ( typeof data === "string" ) {
            try {
                data = data === "true" ? true :
                data === "false" ? false :
                data === "null" ? null :
                jQuery.isNumeric( data ) ? +data :
                    rbrace.test( data ) ? jQuery.parseJSON( data ) :
                    data;
            } catch( e ) {}

            // Make sure we set the data so it isn't changed later
            jQuery.data( elem, key, data );

        } else {
            data = undefined;
        }
    }

    return data;
}
于 2012-04-16T21:57:50.030 に答える
1

jQueryの関数は、HTML5属性から初期値を取得する以外は.data()、HTML5属性とはまったく相互作用しません。ただし、これがいつdata-*行われるかは完全にはわかりません。別の回答では、への最初の呼び出しで行われたことが示唆されていますが、これは正しい可能性があります（間違いなく理にかなっています）。.data()

.attr()属性の新しい値を指定するために使用しdata-*ても、jQueryがを使用してアクセスするために保存した値は変更されません.data()。説明のために、このjsFiddleを見てください。要素を調べて<div>ボタンをクリックすると、要素の属性の値が変更されている間、2つのconsole.log()呼び出しが同じ値を出力することがわかります。

于 2012-04-16T22:04:28.673 に答える