15

HTML での data-* 属性の使用と、jQuery 内でのその使用について詳しく知りたいです。私は単純に data-attribute-name="a value"を .data() または .attr() で取得しようとしていますが、両方とも以下のメソッドで「未定義」としてログに記録されています。data- 属性を使用して jQuery で値を渡すにはどうすればよいですか?

HTML

<li class="als-item">
    <a data-loc-subject="test value">
        <img src="clock.png"/>
    </a>Beach
</li>

JS 

$( ".als-item" ).click(function(e) {
e.preventDefault();

var data = $('.als-item').data('data-loc-subject');
var attrmethod = $('.als-item').attr('data-loc-subject');
    console.log(data);
    console.log(attrmethod);
});

jsフィドル

4

4 に答える 4

29

データ名の前に という単語を付ける必要はありませんdata。

$( ".als-item > a" ).click(function(e) {
    e.preventDefault();

    var data = $('.als-item').data('loc-subject');
    var attrmethod = $('.als-item').attr('data-loc-subject');
        console.log(data);
        console.log(attrmethod);
});

http://jsfiddle.net/thinkingmedia/c6kYT/

2つの違い

データ属性を使用して、DOM にデータ値をハードコーディングできます。例えば;

<a href="#" data-john="smith">Something</a>
console.log($("a").data("john"));
// will output "smith"

これは、jQuery がデータを属性とは異なる方法で扱うためです。まず、DOM 要素に という属性が含まれているかどうかを確認し、含まれているdata-john場合はその値を返します。その属性が含まれていない場合は、DOM 要素に添付された内部データを調べます。そのデータが存在する場合は、その値を返します。

jQuery を使用してデータを設定すると、DOM 要素の属性は更新されません。内部的にDOM要素にデータを添付します。したがって$("a").data("house","on fire");、文字列「on fire」をラベル「house」の下の DOM 要素に格納します。DOM インスペクターを使用して HTML を確認する場合。と呼ばれるその要素に割り当てられる新しい属性はありませんdata-house。

それはメソッドを使用することとは異なりjQuery.attr()ます。DOM 要素の属性を直接変更します。

編集: HTML要素のデータ属性にアクセスするには、セレクタ(ID、クラスなど)を介して要素を選択する必要があることに注意してください。要素のメソッド属性に「this」を渡し、その引数を使用してデータにアクセスすることはできません。undefined が生成されます。

HTML

<li class="als-item">
    <button onclick="somefunc1(this)" id="mybutton" 
        data-loc-subject="test value">My Button</button>
</li>

JS

function somefunc1(button) {
  // this alert prints "undefined"
  alert($(this).data('loc-subject'));
  // this will print "test value"
  alert($('#mybutton').data('loc-subject'));
}

プランカー

于 2013-08-11T00:23:50.057 に答える
3

"data-"呼び出しで属性プレフィックスを削除する必要があるため、次の.data()ように仮定します。

<span class="als-item" data-loc-subject="foo">ohai</span>

次の方法で取得されます。

console.log($(".als-item").data("loc-subject"));
于 2013-08-11T00:24:14.130 に答える
1 
<div id="someID" attr1="this is attr 1" data-attr-1="data attribute 1"></div>

を使用して要素属性を見つけることができます

$("#someID").attr('attr1') [or] $("#someID").attr('data-attr-1');

要素に属性があるかどうかに基づいてターゲットにするには、次のことができます。

$("[attr1]") or $("[attr1='this is attr 1']")、要素を返します（属性値ではありません）

于 2013-08-11T00:25:01.063 に答える