如何在 JS 中存储多组输入值？

Question

考虑以下输入对

<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

页面上输入对的数量是动态的，而不是固定的。

我希望遍历所有对并将值存储为对，以便稍后输出到表中。

我一直在尝试使用 jQuery 的 each() 来实现，但我无法完全弄清楚。

  var detail = [];
  //var detail = {};

   $('input').each(function(index) {
      detail[index] = $(this).val();
      //detail.index = $(this).val();
   });

  console.log(detail);

这个输出

["iphone", "10", "macbook", "5"]

这不是我需要的。

我习惯了 PHP，那么在 JS/jQuery 中将输入对存储为多维关联数组/对象的正确方法是什么？

Answer 1

您可以使用类item_name 遍历元素并创建一个对象数组，每个对象都有一个name 和qty 属性。

您可以使用 jQuery 的.map() 更轻松地创建这个数组：

var details = $('.item_name').map(function() {
  return {
    name: $(this).val(),
    qty: $(this).next('.item_qty').val()
  };
}).get();

console.log(details);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

Answer 2

javascript中关联数组的等价物是一个对象（都充当字典）

您遇到的问题是您的 html 将键和值描述为平面列表中的输入，因此当您使用 JQuery .each() 枚举它们时，您会将它们全部返回到一个列表中。

[key, value, key, value]

你最可能想要的是一个像这样的对象：

var obj = {
  key: value,
  key: value
}

然后你可以像这样说'macbook'属性

obj.macbook 或 obj['macbook']

您可以通过一次循环两个列表并将它们添加到对象中来实现这一点，或者通过重构您的 html 以在另一个元素中同时包含键和值输入，例如

<div class="item">
 <input type="text" class="item_name" value="iphone">
 <input type="text" class="item_qty" value="10">
</div>
<div class="item">
 <input type="text" class="item_name" value="macbook">
 <input type="text" class="item_qty" value="5">
</div>

然后你可以这样做：

var items = {}
$('.item').each(function(){
 var key = $(this).find('.item_name').val()
 var value = $(this).find('.item_qty').val()
 items[key] = value;
})

Answer 3

var val = $("input.item_name").map(function(){
obj = {}

obj[$(this).val()] = $(this).next("input.item_qty").val();

return obj;
}).get()

console.log(val)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

使用.map()

Answer 4

您可以使用递归，Array.prototype.slice() 在每次函数调用时对两个 <input> 元素进行切片，使用键值对填充对象，直到达到 <input> 元素 .length

var [obj, n] = [{}, 2];
var inputs = $("input[type=text]");
var res = (function re(i) {
  if (i + n <= inputs.length) {
    var [key, prop] = Array.from(inputs).slice(i, i + n).map(({value}) => value)
    obj[key] = prop;
    i += n;
    return re(i)  
  } else {
    return obj
  }
})(0);
console.log(res)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

Answer 5

您可以尝试一个快速而“肮脏”的解决方案：

参考：for each input type get value with javascript

.getElementById 的做法是正确的，但你想要的是 .getElementsByName。

var els = document.getElementsByName("filter[]");

for (var i = 0; i < els.length; i++)
  alert(els[i].value);

<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

或者，按照这个：jQuery .each() with input elements

提取号码：

var arrNumber = new Array();
$('input[type=number]').each(function(){
    arrNumber.push($(this).val());
})

提取文本：

var arrText= new Array();
$('input[type=text]').each(function(){
    arrText.push($(this).val());
})

---

编辑：.map 实现

var arrText= $('input[type=text]').map(function(){
    return this.value;
}).get();