首頁猿問對象數組，javascript。-...

對象數組，javascript。- JSON

Html5

12345678_0001 2024-01-11 17:11:19

我只是想知道是否可以簡化此操作，使用類，避免使用某些標簽中的 id，或者從此表單自動生成 JSON 對象。<div id="formulario1">? ? <label class="elemento">#Manzanas<input type="checkbox" id="elem1"><input type="number" id="val1"></label>? ? <label class="elemento">#Bananas<input type="checkbox" id="elem2"><input type="number" id="val2"></label>? ? <label class="elemento">#Peras<input type="checkbox" id="elem3"><input type="number" id="val3"></label>? ? <label class="elemento">#Naranjas<input type="checkbox" id="elem4"><input type="number" id="val4"></label></div><button id="enviar">enviar</button><script>? ? const a = document.getElementById("formulario1");? ? var arr = [? ? ? ? elem1 = {? ? ? ? ? ? check: document.getElementById("elem1").checked,? ? ? ? ? ? value: document.getElementById("val1").value,? ? ? ? },elem2 = {? ? ? ? ? ? check: document.getElementById("elem2").checked,? ? ? ? ? ? value: document.getElementById("val2").value,? ? ? ? },elem3 = {? ? ? ? ? ? check: document.getElementById("elem3").checked,? ? ? ? ? ? value: document.getElementById("val3").value,? ? ? ? },elem4 = {? ? ? ? ? ? check: document.getElementById("elem4").checked,? ? ? ? ? ? value: document.getElementById("val4").value,? ? ? ? }? ? ];? ? const boton = document.getElementById("enviar");? ? boton.addEventListener("click", function(){? ? ? ? console.log(arr[0]);? ? ? ? console.log(arr[1]);? ? ? ? console.log(arr[2]);? ? ? ? console.log(arr[3]);? ? ? ? var arr_json = (JSON.stringify(arr));? ? ? ? console.log(arr_json);? ? });<script>

查看完整描述

5 回答

蕪湖不蕪

TA貢獻1796條經驗獲得超7個贊

document.getElementById為了避免其中出現太多 s，您可以做的一件事是使用 usedocument.querySelectorAll來代替，它將返回一個 HTML 節點數組。這將返回所有匹配的節點，您可以迭代這些節點來獲取值。在您共享的 HTML 中，document.querySelectorAll('#formulario1 input')將為您提供所有輸入，但我鼓勵您使用nameHTML 輸入上的屬性，以便您了解這些值代表什么。

反對回復 2024-01-11

有只小跳蛙

TA貢獻1824條經驗獲得超8個贊

我知道您是 JS 新手，而這正是我剛開始擔任 Web 開發人員時的情況。您的腳本可以通過創建一個函數來初始化元素來重構，而不是創建每個元素。您可以簡單地使用 for 循環來做到這一點。請查看我的快速重構代碼

<label class="elemento">#Manzanas<input type="checkbox" id="elem1"><input type="number" id="val1"></label>

<label class="elemento">#Bananas<input type="checkbox" id="elem2"><input type="number" id="val2"></label>

<label class="elemento">#Peras<input type="checkbox" id="elem3"><input type="number" id="val3"></label>

<label class="elemento">#Naranjas<input type="checkbox" id="elem4"><input type="number" id="val4"></label>

</div>

<button id="enviar">enviar</button>

const a = document.getElementById("formulario1");

//Old code

// var arr = [

// elem1 = {

// check: document.getElementById("elem1").checked,

// value: document.getElementById("val1").value,

// },

// elem2 = {

// check: document.getElementById("elem2").checked,

// value: document.getElementById("val2").value,

// },

// elem3 = {

// check: document.getElementById("elem3").checked,

// value: document.getElementById("val3").value,

// },

// elem4 = {

// check: document.getElementById("elem4").checked,

// value: document.getElementById("val4").value,

// }

// ];

//=========================

//refactored version

var arr = [];

for (var i = 0; i < 4; i++) {

arr.push(createElem(i + 1));

}

const boton = document.getElementById("enviar");

//old code

// boton.addEventListener("click", function() {

// console.log(arr[0]);

// console.log(arr[1]);

// console.log(arr[2]);

// console.log(arr[3]);

// var arr_json = (JSON.stringify(arr));

// console.log(arr_json);

// });

//refactored version

boton.addEventListener("click", function() {

for(var i=0; i<arr.length; i++){

console.log(arr[i]);

}

var arr_json = (JSON.stringify(arr));

console.log(arr_json);

});

// new function to create Element

function createElem(index) {

const elem = {

check: document.getElementById(i).checked,

value: document.getElementById(i).value,

}

return elem;

}

</script>

或可運行版本 https://jsfiddle.net/x40whk5d/2/

還有其他一些地方可以改進，但我相信當你以后有了更深入的理解后，你自己就能很容易地找到它。我已經注釋掉了您的代碼并添加了我的新代碼以幫助您獲得更好的視圖。謝謝，祝你好運！

反對回復 2024-01-11

ABOUTYOU

TA貢獻1812條經驗獲得超5個贊

我用 JS 類做了一個解決方案，沒有所有 CSS 類或 Id，結果數據是這樣的：

{

"input0":{"checkbox":true,"input":"23423"},

"input1":{"checkbox":false,"input":""},

"input2":{"checkbox":false,"input":""},

"input3":{"checkbox":false,"input":""}

}

在這里你可以看到codesanbox中的解決方案

反對回復 2024-01-11

開滿天機

TA貢獻1786條經驗獲得超13個贊

您可以枚舉表單元素中所有可用的復選框。請參見下面的示例：

function loopForm(form) {

var arr = [];

for (var i = 0; i < form.elements.length; i++) {

if (form.elements[i].type == 'checkbox') {

arr.push({ check: form.elements[i].checked, value: form.elements[i].value });

}

var arr_json = (JSON.stringify(arr));

document.getElementById("demo").innerHTML = arr_json;

}

反對回復 2024-01-11

森林海

TA貢獻2011條經驗獲得超2個贊

有效。這是我正在尋找的輸出。謝謝！

const contenedor = document.getElementById('contenedor');

const elem = contenedor.querySelectorAll('.caja');

const elem2 = contenedor.querySelectorAll('.cajas');

document.getElementById('accion').addEventListener('click', function(){

var i = 0; //variables

let arr = [];

for(i; i< elem.length; i++){

arr.push({texto:elem[i].value, valor: elem2[i].value});

}

console.log(JSON.stringify(arr));

});

反對回復 2024-01-11

5 回答
0 關注
213 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

對象數組，javascript。- JSON

對象數組，javascript。- JSON

5 回答

添加回答

對象數組，javascript。- JSON

對象數組，javascript。- JSON