Rails 3使用Ajax计算行总数
Rails 3使用Ajax计算行总数
提问于 2011-10-07 03:28:13
我有一个发票应用。发票包含行项目。提交发票后，可以很好地计算行合计和总计。
但我也想在提交发票之前计算一下总金额和总金额。例如，如果更改数量，则行合计和总计也应更改。
我目前正在研究不同的jQuery插件。也许你以前也做过类似的事情。你有什么推荐的？
Stack Overflow用户
回答已采纳
发布于 2011-10-07 06:21:36
你不需要一个插件。仅jQuery就足够了。您需要做的是在application.js文件中为.change()或.blur()添加一个处理程序。我推荐后者。然后利用html5的"data-“属性将价格存储为一个普通的浮点型，这样jQuery就可以获取它并对其进行一些计算。
invoice.html.erb
<div class="item">
<h3>Item #1</h3>
Price: <div class="price" data-price="10.20">$10.20 USD</div>
Qty: <input type="text" size="2" id="product_1_quantity" class="quantity" value="1">
</div><br /><br />
<div class="item">
<h3>Item #2</h3>
Price: <div class="price" data-price="3.50">$3.50 USD</div>
Qty: <input type="text" size="2" id="product_2_quantity" class="quantity" value="1">
</div><br /><br />
Total Price: <span id="total-price">input quantities</span>application.js
function getTotal(quantities) {
var total = 0;
$.each(quantities, function() {
total += parseFloat($(this).closest('.item').find('.price').attr('data-price')) * parseInt($(this).val());
});
$("#total-price").html("$" + total + " USD");
}
$(document).ready(function() {
var quantity = $('.quantity');
getTotal(quantity); // So the total is calculated on page load.
quantity.blur(function() {
getTotal(quantity);
});
});这并不完美(例如，您需要为导致$50.9999999的乘法和结束零的乘法添加一些处理)，但想法是存在的。
在这里测试：http://jsfiddle.net/J3YKh/1/
编辑还请注意，使用此代码时，如果其中一个数量为空，则它将不起作用。这是一个简单的解决方法：
quantity.blur(function() {
var qty = $(this).val;
if(!qty) qty = '0';
getTotal(quantity);
}如果没有值，只填入"0“，然后照常进行。未经测试。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7679454
复制相关文章
相似问题
腾讯云开发者
