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)

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

2 个答案: