使用push（）

Question

我正在遍历一些项以将它们的值添加到数组中。然后，我将所有内容都放入一个对象中，并且一切正常，但是我尝试将每个elements[i]添加为一个对象并为其设置一个唯一的名称没有成功。

如何创建一个对象“ steps”，其中包含两个名称分别为“ name1”和“ name2”的对象？

var steps = [];
var elements = $("#roi--calc input");
var results = $('#results');

 results.on('click', function(){
    for (var i = 0; i < elements.length; i++) {
     if (elements[i].value.length != 0) {
       steps.push({
         value: elements[i].value
       });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<form id="roi--calc">
  <input type="text" id="input1" data-name="name1" />
  <input type="text" id="input2" data-name="name2" />
  <input type="submit" id="results" value="submit" />
 </form>

Answer 1

我建议使用对象而不是数组。您可以使用输入元素的data-name作为键将值存储在对象中。为了确保您的对象始终是最新的，请在每次form遇到input事件时进行调整：

const steps = {}

document.getElementById('roi--calc').addEventListener('input', function(evt) {
  const input = evt.target
  if (input.checked || input.value.length) {
    steps[input.dataset.name] = {
      value: input.value
    }
  } else {
    delete steps[input.dataset.name]
  }
  console.log(steps);
})

<form id="roi--calc">
  <input type="checkbox" value="checkbox" id="cb1" data-name="name0" />
  <input type="text" id="input1" data-name="name1" />
  <input type="text" id="input2" data-name="name2" />
</form>

Answer 2

您可以使用以下内容：

var steps = {};
steps[elements[i].name] = elements[i].value;

<form id="roi--calc">
  <input type="text" id="input1" name="name1" />
   <input type="text" id="input2" name="name2" />
</form>

Answer 3

尝试一下：

var steps = {};
var elements = $("#roi--calc input");
for (var i = 0; i < elements.length; i++) {
 if (elements[i].value) {
    steps[elements[i].name] = elements[i].value;
  }
}

Answer 4

您可以进一步研究多个JavaScript概念，以解决此问题：

• 数组与对象：https://frontendmayhem.com/javascript-arrays-objects/
• 深入对象：https://javascript.info/object
• 数据属性用法：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

结合这些知识，我们可以实施示例解决方案：

const steps = {};
const elements = $("#roi--calc input");
for (var i = 0; i < elements.length; i++) {
  const element = elements[i];
  const key = element.dataset.name;
  if ((elements[i].checked) || (elements[i].value.length != 0)) {
    if (!steps[key]) {
      steps[key] = [];
    }
    steps[key].push({
      value: elements[i].value
    });
  }
}