[英]Can you set multiple attributes with the DOM's setAttribute function?
Let's say I wanted to create an input element using the DOM.假设我想使用 DOM 创建一个输入元素。 Instead of doing something like this
而不是做这样的事情
var input = document.createElement("input");
input.setAttribute("class", "my-class");
input.setAttribute("type", "checkbox");
input.setAttribute("checked", "checked");
Is there a DRYer way to write these three lines of code into one line.有没有一种 DRYer 方法可以将这三行代码写成一行。
I know you could do something like this我知道你可以做这样的事情
var attributes = ["class", "type", "checked"];
var values = ["my-class", "checkbox", "checked"];
for (var i = 0; i < attributes.length; i++) {
input.setAttribute(attributes[i], values[i])
end
The problem is that is only helpful if you have a boatload of attributes you need to add.问题是,只有当您有大量需要添加的属性时,这才有用。 If you only have two or three, this is even less DRY.
如果你只有两三个,这就更不DRY了。
Is there anyway I can dry up this code?无论如何我可以干掉这段代码吗?
I personally think you're taking DRY too far (the three statements do different things, so I don't see how it's not DRY.) But if you must abstract it, just write a function to do it:我个人认为你把DRY走得太远了(这三个语句做了不同的事情,所以我看不出它怎么不是 DRY。)但是如果你必须抽象它,只需编写一个函数来完成它:
var input = document.createElement("input"); function setAttributes(el, options) { Object.keys(options).forEach(function(attr) { el.setAttribute(attr, options[attr]); }) } setAttributes(input, {"class": "my-class", "type": "checkbox", "checked": "checked"}); console.log(input);
在 jQuery 中,您可以执行以下操作:
var $input = $("<input>", {class: "my-class", type: "checkbox", checked:"checked"});
Yes, You can do using Jquery.是的,您可以使用 Jquery。
$(input).attr(
{
"data-test-1": num1,
"data-test-2": num2
});
Element.setAttribute
sets a single attribute, but you could easily write a helper function: Element.setAttribute
设置单个属性,但您可以轻松编写一个辅助函数:
function setAttributes(elements, attributes) {
Object.keys(attributes).forEach(function(name) {
element.setAttribute(name, attributes[name]);
})
}
Usage:用法:
var input = document.createElement("input");
setAttributes(input, {
class: "my-class",
type: "checkbox",
checked: "checked"
})
As other answers say, you could also use $.attr
.正如其他答案所说,您也可以使用
$.attr
。 That's great if your project already uses jQuery.如果您的项目已经使用 jQuery,那就太好了。 If it doesn't, I'd use this function rather than adding a fairly heavyweight dependency for a simple task.
如果没有,我会使用这个函数,而不是为一个简单的任务添加一个相当重量级的依赖项。
var opt = {"class":"my-class", "type": "checkbox", "checked":"checked"};
Object.keys(opt).forEach( function(key){ input.setAttribute(key,opt[key]); } );
An elegant approach without frameworks or libraries (or even helper functions) is to use:没有框架或库(甚至辅助函数)的优雅方法是使用:
Object.assign(element, attributes);
where the second parameter, attributes
, is an object literal in which:其中第二个参数
attributes
是一个对象字面量,其中:
keys
represent attribute properties keys
代表属性属性values
represent attribute values.values
表示属性值。 This means that:这意味着:
var input = document.createElement("input");
input.setAttribute("class", "my-class");
input.setAttribute("type", "checkbox");
input.setAttribute("checked", "checked");
can be written as:可以写成:
const input = document.createElement("input");
Object.assign(input, {class: 'my-class', type: 'checkbox', checked: 'checked'});
or, if you prefer:或者,如果您愿意:
const input = document.createElement("input");
Object.assign(input, {
class: 'my-class',
type: 'checkbox',
checked: 'checked'
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.