Question

我有一个包含学校课程的表格。此表单上可以有任意数量的类，每个类有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。

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

Answer 1

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

当输入失去焦点时，

.blur将会触发。您可以监听keyup或keydown并匹配[Enter]键，如果您想这样做，或者您可以将其绑定到特定按钮。没有一个全能的答案。

值得注意的另一件事 - 大多数情况下你shouldn't bind events to the document。找到一个合理的父元素，它与你的输入相距不太远，以使其冒泡，然后绑定到那个元素。一个稍微好一些的示例是$('form').on('keyup', '.cost'...，因此事件可以被约束到<form> s，这在大多数页面中相对稀疏。

Answer 2

我建议迭代整个字段文档并每次重新计算所有内容，而不是一次尝试将字段添加到总成本中。像这样的任何中间方法都会导致在您发现的许多情况下总计不准确，以及其他快速输入事件或编辑。

Answer 3

最简单的方法可能是让theCost成为每个类的成本数组，然后简单地对数组求和以得到grandTotal（一个简单的grandTotal = theCost.reduce(function(a, b) { return a + b; });就可以了）。这样，它仍然适用于您的keyup事件，因为每次进行计算时都会使用完整的数字（所以它始终需要44而不是4 + 4等。< / p>

Answer 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);
}

javascript数学与动态字段

4 个答案: