jquery - jQuery 计算订单小计。我的结果为我的所有行提供了相同的小计

Question

我在使用 jquery 函数时遇到了一点问题。我正在尝试计算给定价格的小计，同时输入数量。

这是我的html片段：

<!-- Price -->
<td width="10%"><div class="price" value="0"></div></td>

<!-- Quantity -->
<td width="9%"><input class="quantity" type="text" value="0" size="1" onchange="updateTotal(this)"/></td>

<!-- Subtotal -->
<td width="5%"><div class="subtotal" value="0"></div></td>

还有我的 jQuery 函数：

function updateTotal(qty){

//Calculate Subtotal for each item
var quantity = $(qty).val();
var price = $('.price').html();
var subtotal = parseFloat(price) * parseInt(quantity);
$('.subtotal').text(subtotal);

//Calculate Grand Total
var sum = 0;
$('.subtotal').each(function(){
    sum += parseFloat($(this).text());
});
$('#grandTotal').html(sum);

}

我的结果：

!(http://i45.tinypic.com/16a7exy.png)
!(http://i48.tinypic.com/5vu9uf.png)

我不太确定发生了什么，我试图得到我正在使用的行，但我失败了。任何帮助将非常感激。

Answer 1

$('.subtotal').text(subtotal); 有一个隐含的 .each 。这会导致您覆盖每个 .subtotal 行。通过将该行替换为：

$('.subtotal').each(function(){
this.text(subtotal);
});

Answer 2

使用这样的东西

$("#textbox").focusout(function () {
    updateTotal(value);

});

使用 Jquery 并从文本字段中获取值，当焦点不在时，只调用一次函数。Onchange 导致了这个问题。

Answer 3

如果您正在解决两件事，.html请参见此处：http: //jsfiddle.net/UpGWP/

其他明智的使用.propapi 或.attrapi 获取 value 属性：http: //jsfiddle.net/764J8/

希望对需要有帮助！

我也href从 div中删除了:)

代码

function updateTotal(qty) {

    //Calculate Subtotal for each item
    var quantity = $(qty).val();
    var price = $('.price').attr('value');
    alert(price);
    var subtotal = parseFloat(price) * parseInt(quantity);
    $('.subtotal').text(subtotal);

    //Calculate Grand Total
    var sum = 0;
    $('.subtotal').each(function() {
        sum += parseFloat($(this).text());
    });
    $('#grandTotal').html(sum);
}​