添加大量输入框

Question

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

我需要将小计输入框和 output 添加为总计。 听起来很简单，我认为它会是，但由于某种原因，我无法正确地将它传递给 function。

为了节省时间，我创建了一个 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是什么.val. 是。

此外，您发布的代码是在return false; 这有效地告诉 function 已经完成，不要在该行之后做任何事情。

但是，由于您在两个函数（点击）中都需要该部分代码，因此值得将其包装在自己的 function 中：

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

并在您通知 function 完成之前调用它：

updateGrandTotal();
return false;

在这里看到它部分工作

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

代替：

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

在这里看到它完全工作

Answer 2

您的问题在于以下行：

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

val是 function，而不是返回的 object 上的属性。 您需要以下内容：

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

同样在你的小提琴中，你有一个return false; 在您的 function 的中间，它位于您错误地调用val的代码上方。 也删除该返回。