這是我的內(nèi)容：var config = { first: { value: 'example', type: 'text', label: 'Name' }, second: { value: 'some', type: 'text', label: 'Family' }};有什么想法可以根據(jù)第一個(gè)和第二個(gè)進(jìn)行 2 個(gè)輸入嗎？我需要用這個(gè)方法創(chuàng)建這個(gè)字段：document.createElement('input'); //eg根據(jù)我的配置，使用 javascript 制作兩個(gè)輸入 html 字段。
2 回答
侃侃爾雅
TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超16個(gè)贊
一種解決方案是交互所有對象屬性并為每個(gè)屬性創(chuàng)建一個(gè)標(biāo)簽和輸入，然后將其附加到 DOM。這是一些示例代碼：
var config = {
first: {
value: 'example', type: 'text', label: 'Name'
},
second: {
value: 'some', type: 'text', label: 'Family' }
};
Object.keys(config).forEach(key => {
var container = document.getElementById("input-boxes");
var inputEl = document.createElement("input");
var label = document.createElement("LABEL");
label.innerHTML = config[key].label;
inputEl.type = config[key].type;
inputEl.value = config[key].value;
container.appendChild(label); // put label into the DOM
container.appendChild(inputEl); // put it into the DOM
});
下面是這個(gè)例子在現(xiàn)實(shí)中的工作原理：
https://jsfiddle.net/ea65f4sq/3/
Helenr
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超4個(gè)贊
https://codepen.io/themustafaomar/pen/YzXmqMY?editors=1011
var config = {
first: {
value: "example",
type: "text",
label: "Name"
},
second: {
value: "some",
type: "text",
label: "Family"
}
};
Object.keys(config).forEach((key) => {
var container = document.createElement("div");
var field = document.createElement("input");
var label = document.createElement("label");
label.textContent = config[key].label;
field.value = config[key].value;
field.setAttribute("type", config[key].type);
container.appendChild(label);
container.appendChild(field);
document.body.appendChild(container);
});
- 2 回答
- 0 關(guān)注
- 144 瀏覽
添加回答
舉報(bào)
0/150
提交
取消