Question

我正在创建一个引用生成器，我有一个可复制的产品字段。

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

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

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

这是我到目前为止所拥有的

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

Answer 2

试试这个：

function calculateRowTotals(rowSelector, productSelector, quanitySelector) {
  let rows = [].slice.call(document.querySelectorAll(rowSelector));
  return rows.map(function(rowElement) {
    var product = rowElement.querySelector(productSelector);
    var quantity = rowElement.querySelector(quanitySelector);
    if(!quantity || !product) return 0;
    return parseFloat(product.value || 0) * Math.abs(parseFloat(quantity.value || 0));
  });
}

function calculateTotal(rowSelector, productSelector, quanitySelector) {
  return calculateRowTotals(rowSelector, productSelector, quanitySelector).reduce(function(total, rowTotal) {
    return total + rowTotal;
  }, 0);
}



// demo code

[].slice.call(document.querySelectorAll('.onChangePrice')).forEach(function(element) {
  element.addEventListener('change', function(e) {
    console.log('rows total: ', calculateRowTotals('.row', '.product', '.productQuantity'));
    console.log('total: ', calculateTotal('.row', '.product', '.productQuantity'));
  });
});

console.log(calculateTotal('.row', '.product', '.productQuanity'));

<div class="row">
  <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>
</div>
<div class="row">
  <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>
</div>

使用数量添加克隆元素值

2 个答案: