javascript - Javascript 驱动的表值

Question

我正在开发一个产品详细信息页面，该页面允许用户选择要购买的产品数量。我目前的数量拨号正常工作，但我需要搭载这样的功能来更新显示总购买费用的表格。

这是JSFiddle 上的 DEMO

当用户使用 - 或 + 按钮增加或减少产品数量时需要动态更新的表格：

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div id="pricing-summary">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Qty.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Unit Price</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Discount</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Total</div>
  </div>
  <div class="clearfix pt8"></div>
  <div id="pricing-breakdown">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$quantity</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">4.35</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$0.40</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$3.95</div>
  </div>
</div>

作为实现的一部分，我需要能够控制 2 个不同的变量：

1. 单价（4.35 美元）
2. 折扣百分比 (10% = (单价 x 折扣))

控制这 2 个变量将允许生成折扣成本 ($3.95)、折扣 ($0.43) 和总计（数量 X 折扣成本）。

对于解决此问题的任何帮助，我将不胜感激。

Answer 1

我已经更新了你的小提琴演示的副本。请看看它是否符合您的要求：http: //jsfiddle.net/m4n8xe3r/75/

解决方案如下：

$(document).ready(function() {

  var quantitiy = 0;
    var unitPrice = 4.35;
  var discount = 0.1;

    var updatePriceTable = (quantity) => {
    totalPrice =  Number(quantity * unitPrice).toFixed(2);
    totalDiscount = Number(totalPrice * discount).toFixed(2);
    finalPrice = Number(totalPrice - totalDiscount).toFixed(2);
    $('#totalQuantityElem').text(quantity);
    $('#totalPriceElem').text(totalPrice);
    $('#totaldiscountElem').text(totalDiscount);
    $('#finalPriceElem').text(finalPrice);
    $('#totalPriceHeaderElem').text(totalPrice);
    $('#finalPriceHeaderElem').text(finalPrice);
  }


  $('.quantity-right-plus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val()) + 1;
        $('#quantity').val(quantity);
        updatePriceTable(quantity);
  });

  $('.quantity-left-minus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val()) - 1;
    if (quantity > 0) {
      $('#quantity').val(quantity);
      updatePriceTable(quantity);
    }  
  });

});