javascript - 添加带有数量的克隆元素值

Question

我正在创建一个报价生成器，并且我有一个可复制的产品字段。

选择标签中的每个选项都有一个值，但产品旁边有一个数量，以便用户可以选择产品以及他们想要的数量。

该字段也是可克隆的，因此用户可以拥有多个产品，每个产品都有自己的数量。

我需要获取每一行的数量，将其乘以选项的值，然后将所有行加在一起得出总数。

这是我目前的情况

HTML

<select class="form-control onChangePrice add product" name="Product">
       <option value="">Select...</option>
       <option value="3300">Product 1</option>
       <option value="4500">Product 2</option>
       <option value="6000">Product 3</option>
       <option value="8000">Product 4</option>
</select>
 <div class="col-lg-3 col-md-3 col-sm-3">
    <input class="form-control onChangePrice productQuantity" type="number" name="ProductQuantity" value="1">
 </div>

Javascript

  $(".onChangePrice").change(function(){
    var productTotal = 0;
    $('.product').each(function(){
      if (this.value != "") {
        productEachTotal = this.value * $(".productQuantity").value;
        productTotal += parseFloat(productEachTotal);
      };
    });
   console.log(productTotal);
  });

但它只是返回 NaN。

如有任何帮助，我们将不胜感激!

谢谢

Answer 1

您需要使用 .val() 来获取值。

$(".onChangePrice").change(function(){
    var productTotal = 0;
    $('.product').each(function(){
      if (this.value != "") {
        productEachTotal = this.value * parseInt($(".productQuantity").val());
        productTotal += parseFloat(productEachTotal);
      };
    });
   console.log(productTotal);
  });