html"；数据-“；属性作为javascript参数

假设我有：

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

---

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

获取

数据-*

属性的最简单方法是使用

元素。getAttribute（）

：

演示：

---

尽管我建议将

这个
传递给
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');
}

演示：


通过属性访问它们的新方法是使用
dataset
，但并非所有浏览器都支持这种方法。您会得到如下结果：

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

演示：


还要注意，在HTML中，这里不应该有逗号：

data-name="bbb",

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

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


参考文献：

data-name="bbb",

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

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


element.getAttribute（）
：
.dataset
：
.dataset
浏览器兼容性：
HTML:

data-name="bbb",

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

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

但是我使用的是jQuery。
简单的回答是语法是
this.dataset.which

您的代码应该如下所示：

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

此外，您不需要使用逗号来分隔属性。
如果您使用jQuery，您可以通过

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

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


const fun=（{uid:'ddd'，name:'eee'，value:'fff'，other:'default'}={}）{
// 
}

这样，您就可以处理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(','))">


JS:

@lan通过“this”更好。谢谢。@user2206656同意：）我为每个场景添加了（非常简单的）演示，希望这也能有所帮助！嘿，这可能有点晚了，但是有没有什么方法可以在不使用“onclick”而是类似“onload”的情况下触发函数？+jquery中有
.data（）
方法。使用此代码示例添加快速解释可以帮助改进此答案。