如何在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

您可以使用class 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

 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 3

您可以使用遞歸Array.prototype.slice()在每個函數調用中對兩個<input>元素進行切片，使用鍵，值對填充對象，直到達到<input> elemnents .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 4

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 5

您可以嘗試快速而“骯臟”的解決方案：

參考： 對於每種輸入類型，使用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（）

要提取數字：

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