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

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

對象數組，javascript。- JSON

對象數組，javascript。- JSON

RISEBY 2022-12-30 17:17:24
這不是我的母語，我是 StackOverflow 的新手。所以如果我一開始就寫錯了或者違反了一些論壇規則，我很抱歉。我只是想知道我是否可以簡化它，使用類，避免來自某些標簽的 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 回答

?
慕雪6442864

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

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

{
  "input0":{"checkbox":true,"input":"23423"},
  "input1":{"checkbox":false,"input":""},
  "input2":{"checkbox":false,"input":""},
  "input3":{"checkbox":false,"input":""}
  }

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


查看完整回答
反對 回復 2022-12-30
?
滄海一幻覺

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

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


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


  //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/的可運行版本


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


查看完整回答
反對 回復 2022-12-30
?
慕蓋茨4494581

TA貢獻1850條經驗 獲得超11個贊

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


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;

}


查看完整回答
反對 回復 2022-12-30
?
米脂

TA貢獻1836條經驗 獲得超3個贊

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

更多信息：https ://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

此外，正如許多精明的評論者已經指出的那樣，您想在回調中檢查這些 DOM 節點的boton.addEventListener值。如所寫，這些值永遠不會改變。


查看完整回答
反對 回復 2022-12-30
?
holdtom

TA貢獻1805條經驗 獲得超10個贊

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


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

    });


查看完整回答
反對 回復 2022-12-30
  • 5 回答
  • 0 關注
  • 123 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號