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

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()，并在 fun函数中获取3个属性：

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

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

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

Answer 3

简而言之，语法是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及更高版本之后)始终使用小写，而不考虑大小写。

因此，在使用此方法引用数据属性时，请记住camelCase：

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

而且，您不需要使用逗号来分隔属性。