web-dev-qa-db-fra.com

html "data-" attribut comme paramètre javascript

Disons que j'ai ceci:

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

Et ça:

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

Cela ne fonctionne pas, mais je ne sais absolument pas pourquoi. quelqu'un pourrait-il poster un exemple de travail s'il vous plaît?

javascripthtmlparameters
43
Werner

Le moyen le plus simple d'obtenir les attributs data-* consiste à utiliser element.getAttribute():

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

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

Bien que je suggère de simplement passer de this à fun(), et d’obtenir les 3 attributs inside la fonction fun:

onclick="fun(this);"

Et alors:

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/

La nouvelle façon d'y accéder par propriété est d'utiliser dataset, mais elle n'est pas prise en charge par tous les navigateurs. Vous les obtiendriez comme suit:

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

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

Notez également que dans votre code HTML, il ne devrait pas y avoir de virgule ici:

data-name="bbb",

Références:

79
Ian

Si vous utilisez jQuery, vous pouvez facilement récupérer les attributs de données en

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

La réponse courte est que la syntaxe est this.dataset.whatever.

Votre code devrait ressembler à ceci:

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

Autre remarque importante: Javascript supprimera toujours les traits d'union et rendra les attributs de données camelCase, quelle que soit la capitalisation utilisée. data-camelCase deviendra this.dataset.camelcase et data-Camel-case deviendra this.dataset.camelCase.

jQuery (après v1.5 et versions ultérieures) always utilise des minuscules, quelle que soit votre capitalisation.

Par conséquent, lorsque vous référencez vos attributs de données à l'aide de cette méthode, souvenez-vous de camelCase:

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

De plus, vous n'avez pas besoin d'utiliser des virgules pour séparer les attributs.

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

mais j'utilise jQuery.

0
franki3xe