使用 jquery 更新订单表格上的总行数答案

【问题标题】：updating line totals on an order form with jquery使用 jquery 更新订单表格上的总行数
【发布时间】：2010-08-19 06:35:51
【问题描述】：

我在订单页面上有一个表格，我需要在用户更改数量时更新行总计。我有总计工作，但无法获得行总计，因为我无法弄清楚如何定位正确的元素。

表单是由 cms 生成的，因此最终会被包裹在许多无关的 div 等中，...这是每个行项目的简化版本：

       <input type="text" class="text cart_qty" id="Form_OrderForm_Product-1065-qty" name="Product[1065][qty]" value="1" />

        <input type="text" class="text prod_id" id="Form_OrderForm_prod_1065" name="prod_1065" value="1065" />

        <input class="hidden" type="hidden" id="Form_OrderForm_hidden_1065" name="hidden_1065" value="1.45" />

        <span id='Product_1065_Line' class='cart_price_line'>1.45</span>

所以基本上，只要 .cart_qty 输入字段发生更改，.cart_price_line 就需要更新。

我的总数是这样的：

$('.cart_qty').keyup(function(){
var $thetotal=0;

$('input.cart_qty').each(function(index) {

 $theqty=$(this).val();
 $thenextindex=$("input").index(this) + 2;
 $theprice=$("input:eq("+$thenextindex+")").val();

 $thelinetotal=$theqty * $theprice;
 $thetotal=$thetotal + $thelinetotal;

});
$("#total_price_curr").html($thetotal).formatCurrency();
$("#Form_OrderForm_totalHidden").val($thetotal);


});

它可以计算订单项，但我不知道如何在 $("input.cart_qty").each(...) 函数中定位 span.cart_price_line。

任何帮助将不胜感激

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

那不是this.children("span.cart_price_line")

【讨论】：

span.cart_price_lin 不是孩子，而是兄弟姐妹

【解决方案2】：

我不确定我是否得到了您的要求，但也许这会有所帮助。将此添加到 .each() 函数的末尾

var product_id = $(this).attr("id").split("-")[1];
$("#Product_" + product_id + "_Line").html($thelinetotal);

添加了该行的演示：http://jsfiddle.net/7NCdQ/

另外，我重写了它（新的 jQuery 选择器来获取价格和重命名的变量）

$('input.cart_qty').keyup(function(){
    var total = 0;

    $('input.cart_qty').each(function(index) {
        var product_id = $(this).attr("id").split("-")[1];

        var quantity = $(this).val();
        var price = $("#Form_OrderForm_hidden_" + product_id).val();

        var line_total =  price * quantity;
        total += line_total;

        $("#Product_" + product_id + "_Line").html(line_total);
    });

    $("#total_price_curr").html(total);
    $("#Form_OrderForm_totalHidden").val(total);
});

演示：http://jsfiddle.net/7NCdQ/1/

【讨论】：