jquery - 我想将元素插入数组

Question

我想获取所有具有此格式值的输入字段

"name": [{
  "id": 3,
  "qty": 2
}, {
  "id": 4,
  "qty": 5
}]

我的脚本

$("#qty-"+item.id).keyup(function(){
                            var qty = $("#qty-"+item.id).val();
                            var price = $("#price-"+item.id).val();
                            var ids = $("#ids-"+item.id).val();
                            var total = qty * price;
                            $("#amount-"+item.id).val(total);
                            var obj={};
                            var name = [];
                            obj.id = ids;
                            obj.qty = qty;
                            name.push(obj);
                            console.log(name);
                            /* Sum of Total of all amount */
                                var add = 0;
                                $(".amount").each(function() {
                                    add += Number($(this).val());
                                });
                                console.log(add);
                                $("#aproxTotal").text("Aprox Total is : " + add);
                            /* Sum of Total of all amount */
                        });

在控制台中，我仅以这种方式获得最后输入的值

输出

0:
id:"14"
qty:"1"

如何让所有归档才有值(value)。如果我使用每个函数，它也会显示所有甚至空字段

下面给出了我的 HTML

    <div id="price-calculation-view">
   <div id="price_calculation">
      <div class="col-lg-2 main"><input type="text" value="Newspaper" readonly="" class="form-control"></div>
      <div class="col-lg-2 main"><input type="text" name="price" id="price-3" value="9" readonly="" class="form-control" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-2 main"><input type="text" value="" name="qty" id="qty-3" class="form-control qty" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-2 main"><input type="text" name="amount" id="amount-3" value="" readonly="" class="form-control amount" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-3 main"><input type="text" name="id" id="ids-3" value="3" readonly="" class="form-control"></div>
   </div>
   <div id="price_calculation">
      <div class="col-lg-2 main"><input type="text" value="Cardboards (flattened)" readonly="" class="form-control"></div>
      <div class="col-lg-2 main"><input type="text" name="price" id="price-4" value="5" readonly="" class="form-control" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-2 main"><input type="text" value="" name="qty" id="qty-4" class="form-control qty" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-2 main"><input type="text" name="amount" id="amount-4" value="" readonly="" class="form-control amount" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-3 main"><input type="text" name="id" id="ids-4" value="4" readonly="" class="form-control"></div>
   </div>
   <div id="price_calculation">
      <div class="col-lg-2 main"><input type="text" value="Glass Bottles (Unbroken)" readonly="" class="form-control"></div>
      <div class="col-lg-2 main"><input type="text" name="price" id="price-5" value="0.4" readonly="" class="form-control" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-2 main"><input type="text" value="" name="qty" id="qty-5" class="form-control qty" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-2 main"><input type="text" name="amount" id="amount-5" value="" readonly="" class="form-control amount" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-3 main"><input type="text" name="id" id="ids-5" value="5" readonly="" class="form-control"></div>
   </div>
   <div id="price_calculation">
      <div class="col-lg-2 main"><input type="text" value="Plastic bottles" readonly="" class="form-control"></div>
      <div class="col-lg-2 main"><input type="text" name="price" id="price-6" value="11" readonly="" class="form-control" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-2 main"><input type="text" value="" name="qty" id="qty-6" class="form-control qty" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-2 main"><input type="text" name="amount" id="amount-6" value="" readonly="" class="form-control amount" onkeypress="return isNumber(event)"></div>
      <div class="col-lg-3 main"><input type="text" name="id" id="ids-6" value="6" readonly="" class="form-control"></div>
   </div>

</div>

值动态地来自 api 如何实现这一点？

Answer 1

问题是你的 var 保存的哈希数组不是全局的，所以每次你执行 var name = [] 时它都会重置它。

将 var name = [] 放在 keyup 函数之外。

var name = [];

$("#qty-"+item.id).keyup(function(){
                        var qty = $("#qty-"+item.id).val();
                        var price = $("#price-"+item.id).val();
                        var ids = $("#ids-"+item.id).val();
                        var total = qty * price;
                        $("#amount-"+item.id).val(total);
                        var obj={};
                        obj.id = ids;
                        obj.qty = qty;
                        name.push(obj);
                        console.log(name);
                        /* Sum of Total of all amount */
                            var add = 0;
                            $(".amount").each(function() {
                                add += Number($(this).val());
                            });
                            console.log(add);
                            $("#aproxTotal").text("Aprox Total is : " + add);
                        /* Sum of Total of all amount */
                    });

看看 fiddle ，你只需要适应它! https://jsfiddle.net/zqxn5gzf/