Javascript 驱动 Table 值

Question

我正在开发一个允许用户选择要购买的产品数量的产品详细信息页面。我目前的数量刻度盘工作正常，但我需要借助此功能来更新显示总购买费用的 table。

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

<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">[=12=].40</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">.95</div>
  </div>
</div>

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

单价 ($4.35)
折扣百分比（10% =（单价 x 折扣））

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

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

Answer 1

我已经更新了您的 fiddle 演示的副本。请查看它是否符合您的要求：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);
    }  
  });

});

Javascript 驱动 Table 值

Javascript Driven Table Values

html

javascript

jquery-calculation

twitter-bootstrap