如果动态输入，如何在javascript中获取所有输入值的总和

Question

我希望获取所有产品输入字段值的总计，这些值在用户单击加号或减号按钮时动态生成，为此添加了每个产品的总价。

非常感谢任何帮助。这是我目前所拥有的：

JS

$(function() {
  $('.service_product-item').each(function() {
    var thisEl = $(this),
      btnPlus = thisEl.find('.service_btn-plus'),
      btnMinus = thisEl.find('.service_btn-minus'),
      fieldQtt = thisEl.find('input[name="service-qt1"],input[name="service-qt2"]'),
      itemPriceEl = thisEl.find('.service_item-price'),
      price = itemPriceEl.data('price');
    // Add Products & Products Price
    btnPlus.on('click', function() {
      qttValue = parseInt(fieldQtt.val());
      fieldQtt.val(qttValue + 1);
      itemPriceEl.html('$' + (qttValue + 1) * price);
    });
    // Subtract Products & Products Price
    btnMinus.on('click', function() {
      qttValue = parseInt(fieldQtt.val()) - 1;
      var newQTT = (qttValue <= 0) ? 0 : qttValue;
      fieldQtt.val(newQTT);
      itemPriceEl.html('$' + newQTT * price);
    });
  });
});

HTML

<div class="service_products_and_services_wrapper">
  <div class="service_product-items">
    <div class="service_product-item">
      <div class="service_item-wrap">
        <img src="http://www.kinyu-z.net/data/wallpapers/27/796765.png" alt="QT1" title="" />
        <div class="service_wrap-qtt">
          <div class="service_wrap-qtt-field-qtt">
            <input class="service_field-qtt" name="service-qt1" value="0" readonly="" />
          </div>
          <div class="service_wrap-qtt-minus-plus">
            <div class="service_btn-cart-qtt service_btn-plus">+</div>
            <div class="service_btn-cart-qtt service_btn-minus">-</div>
          </div>
        </div>
      </div>
      <div class="service_item-info">
        <div class="service_item-title">QT1<br>
          <span style="font-size: .7em; text-transform: none;">($5 per item)</span>
        </div>
        <div class="service_item-price" data-price="5">$0</div>
      </div>
    </div>
    <div class="service_product-item">
      <div class="service_item-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIuVn6ZXHwQiFC0IlB1N_CxbXo6-5x1A4yqspYsxUUb0Xjmu8L" alt="QT2" title="" />
        <div class="service_wrap-qtt">
          <div class="service_wrap-qtt-field-qtt">
            <input class="service_field-qtt" name="service-qt2" value="0" readonly="" />
          </div>
          <div class="service_wrap-qtt-minus-plus">
            <div class="service_btn-cart-qtt service_btn-plus">+</div>
            <div class="service_btn-cart-qtt service_btn-minus">-</div>
          </div>
        </div>
      </div>
      <div class="service_item-info">
        <div class="service_item-title">QT2<br>
          <span style="font-size: .7em; text-transform: none;">($10 per item)</span>
        </div>
        <div class="service_item-price" data-price="10">$0</div>
      </div>
    </div>
  </div>
  <p style="margin-top: 40px;">Grand Total: $0</p>
</div>

这是DEMO

Answer 1

问题陈述存在一些问题。主要的一个是您实际上没有为您的应用程序定义任何模型，并且您的 html 也充当数据模型，并且重要数据的范围为事件处理程序。也不清楚该应用程序的初始状态是什么。所以我只是稍微修改一下你的代码。

一个简单的方法来展示它是如何做到的：

• 有一个全球总量
• 每个减号和加号都会相应地更新值

https://jsfiddle.net/Lyxceu3s/43/

var total = 0;
$(function() {
  $('.service_product-item').each(function() {
    var thisEl = $(this),
      btnPlus = thisEl.find('.service_btn-plus'),
      btnMinus = thisEl.find('.service_btn-minus'),
      fieldQtt = thisEl.find('input[name="service-qt1"],input[name="service-qt2"]'),
      itemPriceEl = thisEl.find('.service_item-price'),
      price = itemPriceEl.data('price');
    // Add Products & Products Price
    btnPlus.on('click', function() {
      qttValue = parseInt(fieldQtt.val());
      fieldQtt.val(qttValue + 1);
      total = total + price;
      itemPriceEl.html('$' + (qttValue + 1) * price);
      $('#idGT').html(total);
    });
    // Subtract Products & Products Price
    btnMinus.on('click', function() {
      qttValue = parseInt(fieldQtt.val()) - 1;
      if(qttValue >= 0){
         total = total - price;
      }
      var newQTT = (qttValue <= 0) ? 0 : qttValue;
      fieldQtt.val(newQTT);
      itemPriceEl.html('$' + newQTT * price);
      $('#idGT').html(total);
    });
  });
});

这也需要对您的 html 进行一些修改：

<p style="margin-top: 40px;">Grand Total: $<span id="idGT">0</span></p>

注意：如果是减号，在有条件地将其重置为 0 之前，您必须检查数量是否高于或 0。

作为一般说明，您可能希望将模型与视图分开。检查以下 SO 线程以获取摘要："Hello World" in MVC Pattern

Answer 2

更新了小提琴。对其进行了一些更改 请看一下，如果这就是您要找的，请告诉我。

https://jsfiddle.net/Lyxceu3s/35/

      var firstTotal =  $('input[name="service-qt2"]').val() * 10 ; 
      var secondTotal = $('input[name="service-qt1"]').val() * 5;
      $('#grandTotal').html(firstTotal + secondTotal)