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」，然後照常進行。未經測試。