it-swarm.com.de

html "data-" -Attribut als Javascript-Parameter

Sagen wir, ich habe folgendes:

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

Und das:

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

Das funktioniert nicht, aber ich habe keine Ahnung warum. könnte jemand bitte ein funktionierendes Beispiel posten?

43
Werner

data-*-Attribute erhalten Sie am einfachsten mit element.getAttribute():

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

DEMO:http://jsfiddle.net/pm6cH/


Obwohl ich vorschlagen würde, einfach this an fun() zu übergeben und die 3 Attribute in der fun-Funktion zu bekommen:

onclick="fun(this);"

Und dann:

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/


Der neue Zugriff auf diese Eigenschaften erfolgt mit dataset. Dies wird jedoch nicht von allen Browsern unterstützt. Sie würden sie wie folgt bekommen:

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

DEMO:http://jsfiddle.net/pm6cH/2/


Beachten Sie auch, dass in Ihrem HTML-Code hier kein Komma stehen sollte:

data-name="bbb",

Verweise:

79
Ian

Wenn Sie jQuery verwenden, können Sie die Datenattribute einfach über abrufen

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

Die kurze Antwort lautet, dass die Syntax this.dataset.whatever ist.

Ihr Code sollte so aussehen:

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

Ein weiterer wichtiger Hinweis: Javascript entfernt immer Bindestriche und macht die Datenattribute camelCase, unabhängig von der verwendeten Großschreibung. data-camelCase wird zu this.dataset.camelcase und data-Camel-case wird zu this.dataset.camelCase.

jQuery (nach Version 1.5 und höher) always verwendet unabhängig von Ihrer Großschreibung Kleinbuchstaben.

Wenn Sie Ihre Datenattribute mit dieser Methode referenzieren, denken Sie an camelCase:

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

Sie müssen auch keine Kommas verwenden, um Attribute zu trennen.

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

aber ich verwende jQuery.

0
franki3xe

sie können Standardparameter in Ihrer Funktion verwenden und dann nur das gesamte Dataset selbst übergeben, da das Dataset bereits ein DOMStringMap-Objekt ist

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

auf diese Weise können Sie mit allen Datenwerten umgehen, die im HTML-Tag festgelegt wurden, oder Standardwerte verwenden, wenn sie nicht festgelegt wurden

vielleicht nicht in dieser Situation, aber in anderen Fällen kann es vorteilhaft sein, alle Ihre Einstellungen in einem einzigen Datenattribut zu speichern

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

es gibt wahrscheinlich knappe Möglichkeiten, dies zu tun, wenn Sie bestimmte Dinge über die Reihenfolge der Daten bereits wissen

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