web-dev-qa-db-ja.com

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

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

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

まあ、これは機能していませんが、なぜかはまったくわかりません。誰かが実例を投稿してください。

javascripthtmlparameters
48
Werner

data-*属性を取得する最も簡単な方法は、element.getAttribute()を使用することです。

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

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

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

onclick="fun(this);"

その後：

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

DEMO：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",

参照：

86
Ian

JQueryを使用している場合は、次の方法でデータ属性を簡単に取得できます。

$(this).data("id") or $(event.target).data("id")
1
Jithin Vijayan

簡単な答えは、構文はthis.dataset.whateverです。

コードは次のようになります。

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

別の重要な注意： Javascriptは、使用する大文字小文字に関係なく、常にハイフンを取り除き、データ属性camelCaseを作成します。 data-camelCaseはthis.dataset.camelcaseになり、data-Camel-caseはthis.dataset.camelCaseになります。

jQuery（v1.5以降）alwaysは大文字と小文字に関係なく小文字を使用します。

したがって、このメソッドを使用してデータ属性を参照するときは、camelCaseを覚えておいてください。

<div data-this-is-wild="yes, it's true"
    onclick="fun(this.dataset.thisIsWild)">

また、属性を区切るためにコンマを使用する必要はありません。

0
pbarney

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を使用しています。

0
franki3xe

データセットはすでにDOMStringMapオブジェクトであるため、関数でデフォルトのパラメーターを使用してから、データセット全体を渡すだけです。

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

<script>
const fun = ({uid:'ddd', name:'eee', value:'fff', other:'default'} = {}) { 
    // 
}
</script>

そうすれば、htmlタグで設定されたデータ値を処理したり、設定されていない場合はデフォルトを使用したりできます-そのようなこと

この状況ではないかもしれませんが、他の状況では、すべての設定を単一のデータ属性に入れる方が有利な場合があります

<div data-all='{"uid":"aaa","name":"bbb","value":"ccc"}'
onclick="fun(JSON.parse(this.dataset.all))">

データの順序について特定のことを既に知っている場合は、おそらくもっと簡単な方法があります

<div data-all="aaa,bbb,ccc" onclick="fun(this.dataset.all.split(','))">
0
queviva