html“data-”属性作为javascript参数
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16566299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html "data-" attribute as javascript parameter
提问by Werner
Lets say I have this:
可以说我有这个:
<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this.data.uid, this.data-name, this.data-value)">
And this:
和这个:
function fun(one, two, three) {
//some code
}
Well this is not working but I have absolutely no idea why. could someone post a working example please?
好吧,这不起作用,但我完全不知道为什么。有人可以发布一个工作示例吗?
回答by Ian
The easiest way to get data-*
attributes is with element.getAttribute()
:
获取data-*
属性的最简单方法是element.getAttribute()
:
onclick="fun(this.getAttribute('data-uid'), this.getAttribute('data-name'), this.getAttribute('data-value'));"
DEMO:http://jsfiddle.net/pm6cH/
演示:http : //jsfiddle.net/pm6cH/
Although I would suggest just passing this
to fun()
, and getting the 3 attributes insidethe fun
function:
虽然我建议刚好路过this
来fun()
,并获得3个属性中的fun
功能:
onclick="fun(this);"
And then:
进而:
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/
演示:http : //jsfiddle.net/pm6cH/1/
The new way to access them by property is with dataset
, but that isn't supported by all browsers. You'd get them like the following:
通过属性访问它们的新方法是使用dataset
,但并非所有浏览器都支持。你会像下面这样得到它们:
this.dataset.uid
// and
this.dataset.name
// and
this.dataset.value
DEMO:http://jsfiddle.net/pm6cH/2/
演示:http : //jsfiddle.net/pm6cH/2/
Also note that in your HTML, there shouldn't be a comma here:
另请注意,在您的 HTML 中,此处不应有逗号:
data-name="bbb",
References:
参考:
element.getAttribute()
: https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute.dataset
: https://developer.mozilla.org/en-US/docs/DOM/element.dataset.dataset
browser compatibility: http://caniuse.com/dataset
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
回答by franki3xe
HTML:
HTML:
<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this)">
JavaScript:
JavaScript:
function fun(obj) {
var uid= $(obj).attr('data-uid');
var name= $(obj).attr('data-name');
var value= $(obj).attr('data-value');
}
but I'm using jQuery.
但我正在使用 jQuery。
回答by pbarney
The short answer is that the syntax is this.dataset.whatever
.
简短的回答是语法是this.dataset.whatever
.
Your code should look like this:
您的代码应如下所示:
<div data-uid="aaa" data-name="bbb" data-value="ccc"
onclick="fun(this.dataset.uid, this.dataset.name, this.dataset.value)">
Another important note:Javascript will always strip out hyphens and make the data attributes camelCase, regardless of whatever capitalization you use. data-camelCase
will become this.dataset.camelcase
and data-Camel-case
will become this.dataset.camelCase
.
另一个重要的注意事项:无论您使用什么大写,Javascript 将始终去除连字符并将数据属性设为驼峰式。data-camelCase
将成为this.dataset.camelcase
,data-Camel-case
将成为this.dataset.camelCase
。
jQuery (after v1.5 and later) alwaysuses lowercase, regardless of your capitalization.
jQuery(v1.5 及更高版本之后)总是使用小写字母,无论您的大小写如何。
So when referencing your data attributes using this method, remember the camelCase:
因此,在使用此方法引用数据属性时,请记住驼峰式命名法:
<div data-this-is-wild="yes, it's true"
onclick="fun(this.dataset.thisIsWild)">
Also, you don't need to use commas to separate attributes.
此外,您不需要使用逗号来分隔属性。
回答by Jithin Vijayan
If you are using jQuery you can easily fetch the data attributes by
如果您使用的是 jQuery,您可以通过以下方式轻松获取数据属性
$(this).data("id") or $(event.target).data("id")
回答by queviva
you might use default parameters in your function and then just pass the entire dataset itself, since the dataset is already a DOMStringMap Object
您可以在函数中使用默认参数,然后只传递整个数据集本身,因为数据集已经是一个 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>
that way, you can deal with any data-values that got set in the html tag, or use defaults if they weren't set - that kind of thing
这样,您可以处理在 html 标记中设置的任何数据值,或者如果未设置则使用默认值 - 那种事情
maybe not in this situation, but in others, it might be advantageous to put all your preferences in a single data-attribute
也许不是在这种情况下,但在其他情况下,将您的所有偏好放在一个数据属性中可能是有利的
<div data-all='{"uid":"aaa","name":"bbb","value":"ccc"}'
onclick="fun(JSON.parse(this.dataset.all))">
there are probably more terse ways of doing that, if you already know certain things about the order of the data
如果您已经了解有关数据顺序的某些事情,那么可能有更简洁的方法
<div data-all="aaa,bbb,ccc" onclick="fun(this.dataset.all.split(','))">