查找多个输入框的值

Question

我正在为我的商店建立一个多数量选择器。图片如下：

在网站上，产品的价格会根据添加的数量进行更新。 10个产品= 10％折扣等。我希望能够在用户编辑数量选择器中的任何一个输入框时显示此价格变化。

输入字段的构建方式如下：

<div data-value="S" data-varientid="8195426353207" class="swatch-element swatch-element-2 size s available">

   <input id="swatch-0-s" data-variant-id="variant_8195426353207" type="checkbox" name="option-0" value="S">

   <label for="swatch-0-s">
                  S
      <img class="crossed-out" src="//cdn.shopify.com/s/files/1/0020/2188/3959/t/2/assets/soldout.png?5180939831627851747" alt="">
   </label>

   <input id="qty" name="quantity" class="swatchinput" placeholder="0" value="0" type="text">

</div>

我可以通过以下方式观察输入框以进行更改：

  var qty = $('.swatchinput');

  $('.swatchinput').on('paste keyup', function() {
    console.log(qty);
  });

但是，这会返回有关元素而不是内容的信息。我也不确定将各种输入字段的内容添加到一起以达到总数量的最佳方法。

Answer 1

这需要

 var qty = $('.swatchinput').val();

不是

var qty = $('.swatchinput');

至于你的第二个问题，

循环每个输入，获取值，然后将其加总。初始化循环的总OUTSIDE也是如此，它不会覆盖它。

Answer 2

这样的东西？

var total = 0;

$('.switchinput').each(function(){
    total += $(this).val();
});

console.log(total);

要获取jQuery中元素的值，请使用.val（）：

http://api.jquery.com/val/

.each循环遍历每个匹配的元素并在该元素上运行一个函数（通过＆＃39; this＆＃39;）

http://api.jquery.com/each/

Answer 3

您也可以使用Array reduce方法来执行此操作。选择所有输入，获取数组，然后将它们的值减少为总和。

var total = $('.swatchinput').get().reduce(function(total, input){
  return total + parseInt(input.value || '0');
}, 0);

console.log(total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="quantity" class="swatchinput" placeholder="0" value="1" type="text">
<input name="quantity" class="swatchinput" placeholder="0" value="2" type="text">
<input name="quantity" class="swatchinput" placeholder="0" value="3" type="text">
<input name="quantity" class="swatchinput" placeholder="0" value="4" type="text">