Rails 3使用Ajax计算行总数

Question

我有一个发票应用程序。发票包含订单项。提交发票后，总计和总额计算正常。

但我也想计算发票提交前的总计和总计。例如，如果您更改数量，则总数和总数应该更改。

我目前正在寻找不同的jQuery插件。也许你过去做过类似的事情。你会推荐什么？

Answer 1

你不需要插件。仅jQuery就够了。你想要做的是在你的application.js文件中添加一个处理程序.change()或.blur()。我推荐后者。然后利用HTML5的“data-”属性将价格存储为一个普通的Float，以便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”，然后照常进行。未经测试。