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

IT技术 javascript html parameters
2021-03-08 12:42:05

可以说我有这个:

<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
}

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

6个回答

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

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

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


虽然我建议刚好路过thisfun(),并获得3个属性fun功能:

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

参考:

嘿,这可能有点晚了,但是有没有什么方法可以不用“onclick”而是像“onload”那样触发函数?
2021-04-22 12:42:05
@lan 传递“这个”更好。谢谢你。
2021-04-26 12:42:05
@user2206656 同意:) 我为每个场景添加了(非常简单的)演示,所以希望这也有帮助!
2021-04-26 12:42:05

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

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

简短的回答是语法是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 将始终去除连字符并将数据属性设为驼峰式。data-camelCase将成为this.dataset.camelcasedata-Camel-case将成为this.dataset.camelCase

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

因此,在使用此方法引用您的数据属性时,请记住驼峰式命名法:

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

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

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。

+ .data()jquery 中有这个方法。
2021-04-27 12:42:05

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