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

gary · 2020-02-22 12:00:06 · 热度: 29

可以说我有这个:

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

好吧,这是行不通的,但我绝对不知道为什么。 有人可以发布一个工作示例吗?

猜你喜欢:
共收到 5 条回复
billy #1 · 2020-02-22 12:00:07

获取.dataset属性的最简单方法是使用fun()

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

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


尽管我建议仅将.dataset传递给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",

参考文献:

  • .dataset: [HTTPS://developer.Mozilla.org/恩-US/docs/Dom/element.get attribute]
  • .dataset: [HTTPS://developer.Mozilla.org/恩-US/docs/Dom/element.DataSet]
  • .dataset浏览器兼容性:[http://caniuse.com/dataset]
mike #2 · 2020-02-22 12:00:08

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

$(this).data("id") or $(event.target).data("id")
berton #3 · 2020-02-22 12:00:09

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。

geoffrey #4 · 2020-02-22 12:00:10

简短的答案是语法为data-camelCase

您的代码应如下所示:

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

另外,您无需使用逗号分隔属性。

harold #5 · 2020-02-22 12:00:11

您可以在函数中使用默认参数然后只需传递整个数据集本身,因为数据集已经是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(','))">
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册