每个动态行的jquerytotal和subtotal仅计算第一行

我正在尝试构建一个动态网格样式的计算器，这样用户就可以增加成本，他们可以根据需要添加任意多的行来捕获所有组件细节。我现在需要做的是使jQuery也成为动态的，这样它就可以为添加的每一行计算每一行的

Total

和

Line Total

。因为我现在已经得到了代码，它只适用于计算器的第一行

$(document).ready(function () {
    $('.used-amount input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.used-cost input[type="text"]').val();
        $('.used-total').text(usedtotal);
    });

    $('.used-cost input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.used-amount input[type="text"]').val();
        $('.used-total').text(usedtotal);
    });

    $('.wastage-cost input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.wastage-amount input[type="text"]').val();
        $('.wastage-total').text(usedtotal);
    });

    $('.wastage-cost input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.wastage-amount input[type="text"]').val();
        $('.wastage-total').text(usedtotal);
    });

    $('.calculator input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var linetotal = 
            ($('.used-amount input[type="text"]').val()
          *  $('.used-cost input[type="text"]').val())
          + ($('.wastage-amount input[type="text"]').val()
          *  $('.wastage-cost input[type="text"]').val())
        $('.line-total').text(linetotal);
    });
});

每一行都是一个局部视图：

@model TheWorkshop.Web.Models.Edit.CalculatorViewModel

<tr class="calculator-detail">
  <td class="component-type">@Html.EnumDropDownListify("ComponentType", @Model.ComponentType)</td>
  <td class="component">@Html.DropDownListFor(model => model.SelectedComponentId, Model.ComponentSelectList, "Select...")</td>
  <td class="used-amount">@Html.EditorFor(model => model.UsedAmount)</td>
  <td class="used-cost">@Html.EditorFor(model => model.UsedCost)</td>
  <td class="used-total"></td>
  <td class="wastage-amount">@Html.EditorFor(model => model.WastageAmount)</td>
  <td class="wastage-cost">@Html.EditorFor(model => model.WastageCost)</td>
  <td class="wastage-total"></td>
  <td class="line-total"></td>
</tr>

和控制器

public ActionResult AddCalculatorRow()
{
    var components = Session.QueryOver<Component>()
                            .OrderBy(c => c.Name).Asc.List<Component>();
    var modelView = new CalculatorViewModel() { Components = components }; 

    return PartialView("_CalculatorRow", modelView);
}

编辑2
这将教会我如何复制和粘贴…

---

上面代码中的错误是，我将所有4个单元格的总数指定给了

linetotal

变量，但在更新

line total

单元格时，使用了

usedtotal

，这算不了什么！将其更改为linetotal变量修复了该问题，现在所有单元格都能正确计算。

您使用的是on（）的非委托版本，它不会绑定到调用后添加的UI元素。试着改变

$('.used-amount input[type="text"]')
       .on("propertychange, change, keyup, paste, input", function () {
    var usedtotal = $(this).val() * $('.used-cost input[type="text"]').val();
    $('.used-total').text(usedtotal);
});

到

有关更多信息，请参阅中的“直接和委派事件”一节

---

我想补充的是，

$（'.used total'）

和

$（'.used cost'）

指的是这些元素中的每一个，而不是与该行相关的元素。需要将其转换为

$（this）.nextAll（'.used total'）

，或类似的内容。@JeffB选择器>精确地引用这些元素中的每一个！nextAll确实阻止后面的行更新前面的行，但实际上它们也不更新自己的行。你有什么建议吗？@SimonMartin:不，那不是真的<代码>$（此）指已修改的元素，在本例中为

。已用金额

<代码>$（this）.nextAll（'.used cost'）选择类为

used cost

的下一个元素。我意识到，在这种情况下，它将不起作用，因为输入元素是

td

s的子元素。您需要：

$（this）.parent（）.sides（'.used cost'）.find（'.input'）.val（）

和

$（this.parent（）.sides（'.used total'）.text（usedtotal）

您还可以使用：

$（this）.this（'.used cost input'）.val（）

和

$（this）.close（'.calculator detail'）.find（'.used total'）.text（used total））.text（used total）

@JeffB将其用于小计。您能否给出一个答案，说明如何使linetotal以同样的方式工作（发现很难在注释中遵循代码）

$(document)
  .on("propertychange, change, keyup, paste, input",
      '.calculator input[type="text"]', function () {
         var linetotal = 
           ($(this).parent().siblings('.used-amount').find('input').val() *    
            $(this).parent().siblings('.used-cost').find('input').val())
         + ($(this).parent().siblings('.wastage-amount').find('input').val() * 
            $(this).parent().siblings('.wastage-cost').find('input').val());
         $(this).parent().siblings('.line-total').text(usedtotal);
      });

$('.used-amount input[type="text"]')
       .on("propertychange, change, keyup, paste, input", function () {
    var usedtotal = $(this).val() * $('.used-cost input[type="text"]').val();
    $('.used-total').text(usedtotal);
});

$(document)
       .on("propertychange, change, keyup, paste, input", 
           '.used-amount input[type="text"]', function () {
    var usedtotal = $(this).val() * $('.used-cost input[type="text"]').val();
    $('.used-total').text(usedtotal);
});