带有动态字段的javascript数学

我有一张有学校班级的表格。此表单上可以有任意数量的类，每个类有2个字段。书费和学费

我有第三个字段，名为grand total，当他们在其他字段中输入成本时，我想更新该字段

我是这样设置的：

    $(document).on( "keyup", ".cost", function(){
        theCost = parseFloat($(this).val(), 2) || 0;
        grandTotal(theCost);
    });


    // Calculate the total
    function grandTotal(theCost){
        totalCost = (totalCost + theCost);
        console.log(totalCost);
    }

因为它在每个键控上都运行，如果我输入

44

，它只会添加

4+4

---

是否有更好的方法来获取字段值而不是键入每个数字？

这取决于您的界面以及您希望它如何工作

.blur

将在输入失去焦点时触发。如果您想这样做，您可以监听

keyup

或

keydown

并匹配[Enter]键，也可以将其绑定到特定按钮。没有一个包罗万象的答案

---

还有一件值得注意的事——在大多数情况下，你是自己。找到一个合理的父元素，该元素离您的输入不太远，可以冒泡，然后绑定到该元素。一个稍微好一点的例子是

$（'form'）（'keyup'、'.cost'…

因此事件可以被限制为在大多数页面中相对稀疏的

事件。

我建议遍历整个字段文档，每次都重新计算所有内容，而不是试图一次向总成本中添加一个字段。任何介于两者之间的方法都会导致在很多情况下，比如你发现的不准确的总数，以及额外的快速键入事件或编辑。

最简单的方法可能是将

theCost

作为每个类的成本数组，然后简单地对数组求和，得到

grandTotal

（简单的

grandTotal=theCost.reduce（函数（a，b）{return a+b；}）

将起作用）。这样，它仍然适用于您的

keyup

事件，因为它每次进行计算时都会获取完整的数字（因此总是需要

44

而不是

4+4

，等等）。

很多时候，我看到这种情况是通过“更新总数”按钮处理的，因此该操作是经过深思熟虑的

$('#updateTotalButton').click(function(){
    $('.cost').each(function() {
        theCost = parseFloat($(this).val(), 2) || 0;
        grandTotal(theCost);
    });
});

// Calculate the total
function grandTotal(theCost){
    totalCost = (totalCost + theCost);
    console.log(totalCost);
}

---

我尝试了blur，我想这会很好-只需要找出如何调整代码以根据数学进行更改。现在，如果我返回并编辑某个内容，它只会给出最后一个总数。在这种情况下，将事件绑定到表单，然后让处理程序执行类似于

var cost=0；$（this）的操作。查找（'.cost'）。每个（函数（）{cost+=parseFloat（this.val）；}）

-这应该会重新计算您刚刚更改的整个表单。

parseFloat（string）

只接受一个参数：我不确定您的

…，2）

是否会这样做？如果您考虑

parseInt（string，radix）

，则设置

radix=2

将从二进制转换为parseInt(“110”，2）==6Hm，我不知道为什么我会有这样的版本。也许这就是为什么33.00+19.98会返回为52.98000000000004不，这是因为JavaScript中的所有数字都是双浮点数（IEEE 754）同样的原因

0.1+0.2！==0.3

有一个很好的Youtube视频解释了这一点：