javascript - javascript パラメータとしての html "data-" 属性

Question

私がこれを持っているとしましょう：

<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this.data.uid, this.data-name, this.data-value)">

この：

function fun(one, two, three) {
    //some code
}

これは機能していませんが、その理由はまったくわかりません。誰かが実際の例を投稿できますか?

Answer 1

data-*属性を取得する最も簡単な方法は次のelement.getAttribute()とおりです。

onclick="fun(this.getAttribute('data-uid'), this.getAttribute('data-name'), this.getAttribute('data-value'));"

デモ: http://jsfiddle.net/pm6cH/

---

に渡しthisて、関数内のfun()3 つの属性を取得することをお勧めしますが、fun

onclick="fun(this);"

その後：

function fun(obj) {
    var one = obj.getAttribute('data-uid'),
        two = obj.getAttribute('data-name'),
        three = obj.getAttribute('data-value');
}

デモ: http://jsfiddle.net/pm6cH/1/

---

プロパティによってそれらにアクセスする新しい方法は を使用することですがdataset、これはすべてのブラウザーでサポートされているわけではありません。次のように取得します。

this.dataset.uid
// and
this.dataset.name
// and
this.dataset.value

デモ: http://jsfiddle.net/pm6cH/2/

---

また、HTML では、ここにカンマがあってはならないことに注意してください。

data-name="bbb",

---

参考文献:

• element.getAttribute(): https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute
• .dataset: https://developer.mozilla.org/en-US/docs/DOM/element.dataset
• .datasetブラウザの互換性: http://caniuse.com/dataset

Answer 2

HTML:

<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this)">

JavaScript:

function fun(obj) {
    var uid= $(obj).attr('data-uid');
    var name= $(obj).attr('data-name');
    var value= $(obj).attr('data-value');
}

しかし、私はjQueryを使用しています。