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

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

虽然我建议将this传递给fun()，然后将{3>属性置于 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

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

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

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

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

Answer 4

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

：

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

Answer 5

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

Answer 6

JS：

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

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

6 个答案: