更新文本字段的 keyup 值答案

【问题标题】：Update on keyup value of a text field更新文本字段的 keyup 值
【发布时间】：2015-06-19 06:20:18
【问题描述】：

我有以下代码：

{% 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 的值？我必须收集每种产品的数量。你能帮我吗？提前谢谢

【问题讨论】：

标签： javascript jquery html ajax onkeyup

【解决方案1】：

我会使用 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/

【讨论】：

不计算total_price_baket
应该，查看演示。
奇怪但不适合我 :(，每个产品的价格计算但总价没有

【解决方案2】：

使用parseFloat 将string 转换为float：

parseFloat() 函数解析一个字符串参数并返回一个浮点数。

查看 cmets 内联：

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();
}

【讨论】：

【解决方案3】：

最初，在呈现页面时，将 total_price_basket 设置为来自服务器的值。在您的 javascript 中设置一个全局变量来存储所有产品的总和：

var sum = 0;

然后在您的calculatePrice 方法中添加这两行：

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

当产品被移除时也做减法。

<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>

【讨论】：

只存储1个产品的价格

【解决方案4】：

你可以试试这个：

$(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);
});   

});

【讨论】：

【解决方案5】：

试试这个

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

【讨论】：