更新上的文本字段的KEYUP值

我有以下代碼：更新上的文本字段的KEYUP值

{% for product in app.session.get('aBasket') %} 
    <input id="product_quantity_{{ product['product_id'] }}" class="form-control quantity" type="text" value="{{ product['product_quantity'] }}" name="" onkeyup="calculatePrice({{ product['product_price'] }},{{ product['product_id'] }})"> 
    <span id="total_price_{{ product['product_id'] }}">{{ product['product_quantity'] * product['product_price'] }}</span> 
{%endfor} 
<div id="total_price_basket">TOTAL:0</div>

我的js函數：

<script type="application/javascript"> 
    function calculatePrice(price, product_id) { 
     var x = document.getElementById("product_quantity_"+product_id); 
     var total_price = price * x.value; 
     $("#total_price_"+product_id).html(total_price); 
     $("#total_price_basket").html(); 
    } 
</script>

所以，價格爲它工作正常的所有產品，問題是如何更改div> total_price_basket onkeyup的值？我必須收集每個產品的數量。你能幫我嗎？ Thx

來源

2015-06-19 TanGio

我會做jQuery的使用，擺脫突兀內嵌的事件處理程序。對於這個HTML標記將改變一點點地用數據屬性：

{% for product in app.session.get('aBasket') %} 
    <input data-id="{{ product['product_id'] }}" 
      data-price="{{ product['product_price'] }}" 
      value="{{ product['product_quantity'] }}" 
      class="form-control quantity" type="text"> 
    <span class="total" id="total_price_{{ product['product_id'] }}">{{ product['product_quantity'] * product['product_price'] }}</span> 
{%endfor} 
<div id="total_price_basket">TOTAL:0</div>

JS：

$('.quantity').on('keyup', function() { 

    // Update individual price 
    var price = $(this).data('price') * this.value; 
    $('#total_price_' + $(this).data('id')).text(price); 

    // Update total 
    var total = 0; 
    $('.total').each(function() { 
     total += Number($(this).text()); 
    }); 
    $('#total_price_basket').text('TOTAL: ' + total); 
}) 
// Trigger initial calculation if needed 
.trigger('keyup');

演示：http://jsfiddle.net/c64xfrpr/

來源

2015-06-19 06:33:25 dfsq

不計算t他total_price_baket – TanGio

它應該，檢查演示。 – dfsq

Bizzare但不適合我:(爲每個產品的價格計算，但總價格沒有 – TanGio

最初，在渲染頁面時，將total_price_basket設置爲來自服務器的值。在JavaScript中設置一個全局變量來存儲所有產品總和：

sum += total_price; 
$("#total_price_basket").html('TOTAL: ' + sum);

當產品被取出，也做減法：

var sum = 0;

然後在您的calculatePrice方法這兩行追加。

<script type="application/javascript"> 
    var sum = 0; 

    function calculatePrice(price, product_id) { 
     var x = document.getElementById("product_quantity_"+product_id); 
     var total_price = price * x.value; 
     $("#total_price_"+product_id).html(total_price); 
     sum += total_price; 
     $("#total_price_basket").html('TOTAL: ' + sum); 
    } 
    </script>

來源

2015-06-19 06:25:06 bjaksic

它的商店只價格從1產品 – TanGio

使用parseFloat轉換string到float：

的parseFloat（）函數解析字符串參數，並返回一個浮點數。

看評論在線：

var total_price = 0; // Set default to zero 
// ^^^^^^^^^^^^^^^^^ 
function calculatePrice(price, product_id) { 
    var x = document.getElementById("product_quantity_" + product_id); 
    var total_price = parseFloat(price) * parseFloat(x.value); 
    //    ^^^^^^^^^^   ^^^^^^^^^^ 
    $("#total_price_" + product_id).html(total_price); 
    $("#total_price_basket").html(); 
}

來源

2015-06-19 06:29:32 Tushar

你可以試試這個：

$(function(){ 
var price=100; 
$('input.quantity').keyup(function(){ 

var all=$('input.quantity'); 
var total=0; 
for(var i=0;i<all.length;i++){ 
    if(!isNaN(all[i].value)){ 
     total+=price*all[i].value 
    } 
} 
$("#total_price_"+product_id).html('TOTAL : '+total); 
}); 

});

來源

2015-06-19 06:31:49 Vikash

嘗試用這種

var x = document.getElementById("product_quantity_"+product_id); 
     var total_price = price * x.value; 
     console.log(x.value);

來源

2015-06-19 06:36:26 Akhil

更新上的文本字段的KEYUP值

回答

相關問題