Javascript 驱动的表值

Question

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

这是JSFiddle上的演示

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

<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 折扣((

控制这两个变量将允许生成折扣成本(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);
}  
});
});