blocks|key|2375041|text|我已经更新了你的小提琴演示的副本。请查看是否符合您的要求：http://jsfiddle.net/m4n8xe3r/75/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2375042|解决方案如下：|2375043|$(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())+%2B+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);
++++}++
++});

});|code-block|syntax|javascript|2375044|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/m4n8xe3r/75/^0|T|W|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

I have updated a copy of your fiddle demo. Please see if it fits your requirement: <a href="http://jsfiddle.net/m4n8xe3r/75/" rel="nofollow noreferrer">http://jsfiddle.net/m4n8xe3r/75/</a>

Solution below:

<pre><code>$(document).ready(function() {

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

 var updatePriceTable = (quantity) =&gt; {
 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 &gt; 0) {
 $('#quantity').val(quantity);
 updatePriceTable(quantity);
 } 
 });

});
</code></pre>

I'm working on a Product Detail page that allows users to choose the number of products to purchase. I currently have the quantity dial working properly, but I need to piggyback on such feature to update a table that displays the total purchase charge.

Here's the <a href="http://jsfiddle.net/UXEngineer/m4n8xe3r/" rel="nofollow noreferrer">DEMO on JSFiddle</a>

The table that needs to be dynamically updated as Users increase or decrease the quantity of product using the - or + buttons:

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

As part of the implementation, I need to be able to control 2 different variables:

<ol>
<li>unit price ($4.35)</li>
<li>discount percentage (10% = (unit price x discount))</li>
</ol>

Controlling these 2 variables will allow generating the Discounted cost ($3.95), the Discount ($0.43) and the Total (Quantity X Discount Cost). 

I would appreciate any help resolving this issue.

Javascript Driven Table Values

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在一个产品详细信息页面上工作，允许用户选择购买的产品数量。我目前的数量拨盘工作正常，但我需要利用这样的功能来更新一个显示总购买费用的表。这是当用户使用-或+按钮增加或减少产品数量时，需要动态更新的表：<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div...

Javascript驱动的表值-腾讯云开发者社区-腾讯云

问Javascript驱动的表值
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript驱动的表值EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript驱动的表值
EN