Question

这就是我正在做的事情。

我有一组div。每组div都可以包含节标题和项列表。每个项目都有与之相关的价格。因此，拆迁部分的第1项的价格为150.00。拆卸部分的第2项价格为200.00。每个项目旁边都有一个输入字段，用户可以在其中键入数值。然后将该值乘以商品价格。因此，在第1项（150.00）旁边是我输入2的字段。在下一个div中，我显示总数。所以150.00 x 2 = 300.00。

我可以为该部分下的每个项目执行此操作。然后，我将整个项目汇总到这些部分旁边的全球价格中。

以下是我正在做的事情的示例：

$(document).ready(function() {
  $(".demolition_num").each(function() {
    $(this).keyup(function(){
      calculateDemSum();
    });
  });
});


function calculateDemSum() {
   var sum = 0;
   $(".demolition_num").each(function(){
     if(!isNaN(this.value) && this.value.lenth != 0){
        var unitCost = $(".unit_cost1").text();
        var _parent = $(this).parent();
        var total = _parent.prev().html();
        sum += parseFloat(this.value * total);
        var subtotal = this.value * total;
        $(_parent).next().html(this.value * total);
     }
     else if (this.value.length !=0){
     }
   });

   $(".cost1").text(sum.toFixed(2));
   $("#cost1").val(sum.toFixed(2));
}

您可以在此处查看所有代码：http://jsfiddle.net/pmetzger/Xeu2T/3/

正如你在jquery中看到的那样，我现在必须独立调用每个部分其他因为我不想计算所有字段，只是我正在修改的字段。

所以问题是，我可以避免必须添加每个部分输入类型ID作为键来触发计算并确保总数正确放置吗？

注意：此代码可能会重复，但相关的数据会有所不同。因此，在下一个客户列表中，它可能不是拆除，而是演示等等。

任何帮助将不胜感激。

Answer 1

首先要指出几点：

您不需要简单地绑定each()循环内的事件将它绑定到标准选择器将绑定到所有适合的元素选择器。
您还有多个具有相同ID的<tr>元素。
您不需要隐藏代码的size属性

新工作fiddle here和代码：

$(document).ready(function()
{
    // Bind the event
    $("#calc").on("keyup", "input[type='text']", function()
    {
        calculateSum(this);
    });
});

function calculateSum(element)
{
    var sum = 0;
    var $this = $(element);
    var targetClass = $this.attr("class");

    // Process each element with the same class
    $("." + targetClass).each(function()
    {
        var thisVal = $(this).val();

        // Count invalid entries as 0
        if(isNaN(thisVal) || thisVal.length === 0)
        {
            thisVal = 0;
        }
        else
        {
            thisVal = parseFloat(thisVal);
        }

        // Get the unit cost and calculate sub-total
        var unitCost = parseFloat($(this).parent().prev("td.unit_cost").text());
    var subTotal = thisVal * unitCost;
    sum += subTotal;
        $(this).parent().next("td").text(subTotal);
    });

    var $item = $this.closest("tr").prevAll(".item").first();
    $item.find("input.section_cost").val(sum.toFixed(2));
    $item.find("td.section_cost").text(sum.toFixed(2));
}

请注意，我已稍微修改了您的HTML - 我将多个<tr id="item">更改为使用类，我移动了这些行以更好地定位您的子部分总数，我将类添加到子部分（隐藏的输入和显示值），我在单位值字段中添加了一个类，并在表中添加了一个id。

Jquery遍历表的多个部分和字段

1 个答案: