html“data-”属性作为javascript参数

html "data-" attribute as javascript parameter

提问by Werner

Lets say I have this:

可以说我有这个：

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

And this:

和这个：

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

Well this is not working but I have absolutely no idea why. could someone post a working example please?

好吧，这不起作用，但我完全不知道为什么。有人可以发布一个工作示例吗？

回答by Ian

The easiest way to get data-*attributes is with element.getAttribute():

获取data-*属性的最简单方法是element.getAttribute()：

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

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

演示：http : //jsfiddle.net/pm6cH/

---

---

Although I would suggest just passing thisto fun(), and getting the 3 attributes insidethe funfunction:

虽然我建议刚好路过this来fun()，并获得3个属性中的fun功能：

onclick="fun(this);"

And then:

进而：

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/

演示：http : //jsfiddle.net/pm6cH/1/

---

---

The new way to access them by property is with dataset, but that isn't supported by all browsers. You'd get them like the following:

通过属性访问它们的新方法是使用dataset，但并非所有浏览器都支持。你会像下面这样得到它们：

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

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

演示：http : //jsfiddle.net/pm6cH/2/

---

---

Also note that in your HTML, there shouldn't be a comma here:

另请注意，在您的 HTML 中，此处不应有逗号：

data-name="bbb",

---

---

References:

参考：

• element.getAttribute(): https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute
• .dataset: https://developer.mozilla.org/en-US/docs/DOM/element.dataset
• .datasetbrowser compatibility: http://caniuse.com/dataset

• 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

回答by franki3xe

HTML:

HTML：

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

JavaScript:

JavaScript：

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

but I'm using jQuery.

但我正在使用 jQuery。

回答by pbarney

The short answer is that the syntax is this.dataset.whatever.

简短的回答是语法是this.dataset.whatever.

Your code should look like this:

您的代码应如下所示：

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

Another important note:Javascript will always strip out hyphens and make the data attributes camelCase, regardless of whatever capitalization you use. data-camelCasewill become this.dataset.camelcaseand data-Camel-casewill become this.dataset.camelCase.

另一个重要的注意事项：无论您使用什么大写，Javascript 将始终去除连字符并将数据属性设为驼峰式。data-camelCase将成为this.dataset.camelcase，data-Camel-case将成为this.dataset.camelCase。

jQuery (after v1.5 and later) alwaysuses lowercase, regardless of your capitalization.

jQuery（v1.5 及更高版本之后）总是使用小写字母，无论您的大小写如何。

So when referencing your data attributes using this method, remember the camelCase:

因此，在使用此方法引用数据属性时，请记住驼峰式命名法：

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

Also, you don't need to use commas to separate attributes.

此外，您不需要使用逗号来分隔属性。

回答by Jithin Vijayan

If you are using jQuery you can easily fetch the data attributes by

如果您使用的是 jQuery，您可以通过以下方式轻松获取数据属性

$(this).data("id") or $(event.target).data("id")

回答by queviva

you might use default parameters in your function and then just pass the entire dataset itself, since the dataset is already a DOMStringMap Object

您可以在函数中使用默认参数，然后只传递整个数据集本身，因为数据集已经是一个 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>

that way, you can deal with any data-values that got set in the html tag, or use defaults if they weren't set - that kind of thing

这样，您可以处理在 html 标记中设置的任何数据值，或者如果未设置则使用默认值 - 那种事情

maybe not in this situation, but in others, it might be advantageous to put all your preferences in a single data-attribute

也许不是在这种情况下，但在其他情况下，将您的所有偏好放在一个数据属性中可能是有利的

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

there are probably more terse ways of doing that, if you already know certain things about the order of the data

如果您已经了解有关数据顺序的某些事情，那么可能有更简洁的方法

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