javascript - 如果动态输入，如何获取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。

一般来说，您可能希望将模型与 View 分开。检查以下 SO 线程的摘要:"Hello World" in MVC Pattern