javascript - 添加大量输入框

Question

以前可能已经回答过这个问题，但我找不到有效的解决方案。

我需要将小计输入框相加并将它们输出为总计。听起来很简单，我认为它会很简单，但出于某种原因我无法让它正常运行。

为了节省时间，我创建了一个 jsFiddle - http://jsfiddle.net/wgrills/hKxgU/4/

编辑:很抱歉发布问题。

我错过了大部分项目，因为我想加快 jsfiddle 的速度。我已经更新了 jsFiddle - http://jsfiddle.net/wgrills/hKxgU/7/ .

如果您单击 + 或 - 按钮，小计会发生变化，这很好。但我无法更新#grandTotal 输入。问题似乎在于:

var grandTotal = 0;
$(".subtotal").each(function() {
    $(this).css("border-color","#f00");
    grandTotal += $(this).val.split("£")[1]; 
});
$("#grandTotal").val("£" + grandTotal);
alert(grandTotal);

部分js。请注意 css 边框更改，我会收到警报以确保脚本正常运行。

代码都是早期的，这只是一个快速的模型。

Answer 1

你给了两个问题，很容易解决!

您是正确的，您发布的上面的部分是问题的一部分。特别是行:

grandTotal += $(this).val.split("£")[1];

您在 val 之后错过了 ()，所以代码会在这里中断，因为它不知道什么是 .val。是。

此外，您发布的代码是在 return false; 之后，这有效地表明函数已完成，请不要在该行之后做任何事情。

但是，由于您需要在两个函数中使用该部分代码(clicks)，因此值得将其包装在自己的函数中:

function updateGrandTotal() {
    var grandTotal = 0;
    $(".subtotal").each(function() {
        $(this).css("border-color", "#f00");
        grandTotal += parseFloat($(this).val().split("£")[1]);
    });
    $("#grandTotal").val("£" + grandTotal);
    alert(grandTotal);
}

并在您通知函数完成之前调用它:

updateGrandTotal();
return false;

See it partially working here

但是，虽然这对项目的加号有效，但您还有另一个问题，当您减号时，盒子变为零，而不是将 £0.00 设置为 0，因此当它尝试时拆分 "£" 它不能。为了解决这个问题，只需将 plus 函数中将价格值转换为价格的位复制到 minus 函数中:

替换:

newprice = price * x;
$('#' + update).val(x);
$('#' + update + '_subtotal').val(newprice);

使用工作版本:

newprice = (price * x) / 100;
newprice = newprice.toFixed(2);
newprice = '£' + newprice;
$('#' + update).val(x);
$('#' + update + '_subtotal').val(newprice);

See it fully working here