Javascript 对Jquery中动态创建的输入值进行乘法和求和

我正在动态创建输入，在输入时，我想将数字相乘，结果显示在另一个输入中，所有这些结果的总和也显示在id为total的输入中

这是我的代码：

新的


总数：
$（“#新建”）。单击（函数（）{
var cont=$（“.numb”）.length；
var指数=cont+1；
var add=“X=”；
$（“.inputs”）。追加（添加）；
});
函数计算（idx）{
$（“#result_uu”+idx）.val（$（“#nn_”+idx）.val（）*$（“#mm_”+idx.val（））；
$（“#total”）.val（Number（$（“#total”）.val（））+Number（$（“#result#uuux”+idx.val（））；
}

当您更新单元格时，

计算（idx）

正在重新计算行，但对于总计，它没有重新计算，而是将新行的总计添加到alrady添加旧值的先前计算的总计中

---

要更正它，您需要将总计重置为0，并循环所有行以重新添加所有行总计。

当您更新单元格时，

calculate（idx）

正在重新计算行，但对于总计，它没有重新计算，而是将新行的总计添加到alrady已添加旧值的先前计算的总计中

---

要更正它，您需要将总计重置为0，并循环所有行以重新添加所有行总计。

问题的一部分是，您在每次更改事件中累积添加总计。相反，您需要完全根据新值重新计算总数

您还可以通过使用DOM遍历将元素相互关联，而不是增量

id

属性，以及在过时的

on*

事件属性上使用委托事件处理程序，使HTML更干净，这应该尽可能避免。试试这个：

$（“#新建”）。单击（函数（）{
$（“.inputs”）.append（'X='）；
});
$（'.inputs'）.on（'input'，'.number'，multi'，function（）{
var$container=$（this）.closest（'div'）；
var number=$container.find（'.number'）.val（）|| 0；
var multi=$container.find（'.multi'）.val（）| | 0；
$container.find（'.line total'）.val（数字*multi）；
updateTotal（）；
});
函数updateTotal（）{
var合计=0；
$（'.line total'）。每个（函数（）{
total+=parseInt（$（this）.val（），10）；
});
$（'总计'）.val（总计）；
}

新的

总计：

您的问题的一部分是，您正在累积每个变更事件的总数。相反，您需要完全根据新值重新计算总数

您还可以通过使用DOM遍历将元素相互关联，而不是增量

id

属性，以及在过时的

on*

事件属性上使用委托事件处理程序，使HTML更干净，这应该尽可能避免。试试这个：

$（“#新建”）。单击（函数（）{
$（“.inputs”）.append（'X='）；
});
$（'.inputs'）.on（'input'，'.number'，multi'，function（）{
var$container=$（this）.closest（'div'）；
var number=$container.find（'.number'）.val（）|| 0；
var multi=$container.find（'.multi'）.val（）| | 0；
$container.find（'.line total'）.val（数字*multi）；
updateTotal（）；
});
函数updateTotal（）{
var合计=0；
$（'.line total'）。每个（函数（）{
total+=parseInt（$（this）.val（），10）；
});
$（'总计'）.val（总计）；
}

新的

总计：

您需要根据每个值计算总和，而不是每次计算新值时都进行相加

所以我所做的是：

• 我在每个结果输入中添加了一个类“.sum”（选择它们）

• 我做了两个函数：一个用于计算行的结果，另一个用于求和

• 我在keyup事件中添加了新函数

因此，当您更改输入值时，逻辑是：

• 行更改的结果（与前面一样）
• 根据每个结果输入计算总和，从0开始（新）

新的


总数：
$（“#新建”）。单击（函数（）{
var cont=$（“.numb”）.length；
var指数=cont+1；
var add=“X=”；
$（“.inputs”）。追加（添加）；
});
函数计算（idx）{
$（“#result_uu”+idx）.val（$（“#nn_”+idx）.val（）*$（“#mm_”+idx.val（））；
}
函数总数（）{
var总和=0；
$.each（$（“.sum”），函数（）{
sum=sum+Number（$（this.val（））；
});
美元（“#总计”）.val（总和）；
}

您需要根据每个值计算总和，而不是每次计算新值时都进行相加

所以我所做的是：

• 我在每个结果输入中添加了一个类“.sum”（选择它们）

• 我做了两个函数：一个用于计算行的结果，另一个用于求和

• 我在keyup事件中添加了新函数

因此，当您更改输入值时，逻辑是：

• 行更改的结果（与前面一样）
• 根据每个结果输入计算总和，从0开始（新）

新的


总数：
$（“#新建”）。单击（函数（）{
var cont=$（“.numb”）.length；
var指数=cont+1；
var add=“X=”；
$（“.inputs”）。追加（添加）；
});
函数计算（idx）{
$（“#result_uu”+idx）.val（$（“#nn_”+idx）.val（）*$（“#mm_”+idx.val（））；
}
函数总数（）{
var总和=0；
$.each（$（“.sum”），函数（）{
sum=sum+Number（$（this.val（））；
});
美元（“#总计”）.val（总和）；
}