jQuery 计算插件：汇总小计以创建总计答案

【问题标题】：jQuery Calculation Plugin: Summing subtotals to create grand totaljQuery 计算插件：汇总小计以创建总计
【发布时间】：2012-03-05 03:49:35
【问题描述】：

我在一个页面上使用jQuery Calculation Plugin 进行数量 x 价格计算，然后添加到小计中。重复 4 次。

每组 4 个涉及具有不同 id 和不同计算的字段（不仅仅是价格 x 数量）。

4个小计字段的id分别是subtotal_events、subtotal_raffle、subtotal_sdc、subtotal_late。

除了显示各个小计之外，我还需要显示“总计”……小计的总计。

在下面提到的小提琴中，我对 4 个小计中的两个的值进行了硬编码。

我还创建了一个函数 recalc3，它当前在 #grandtotal 范围内生成 NaN。根据硬编码的小计，价值应该是 70 美元，即使没有订购旅游或额外的门票。

数小时的阅读帖子和反复试验并没有让我更接近，因此非常感谢任何有助于实现目标的帮助。

这是小提琴：http://jsfiddle.net/sadiem/7spHt/

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您正在尝试提取 SPAN 元素中的文本，但正在使用 $(this).val 函数。使用 $(this).text 函数，并在解析为浮点数之前删除文本中的 $ 符号。

更新的 jsFiddle：http://jsfiddle.net/7spHt/9/

$("[id^=subtotal_]").each(function() {
  var fee = parseFloat($(this).text().replace("$", ""));
  grandtotal += fee;
});

【讨论】：

谢谢，有帮助！如果您可以抽出时间再看一下，您能告诉我为什么除了事件部分的 keyup 之外，我无法更新总到期 (#grandtotal) 吗？每当 4 个小计中的任何一个发生变化时，我都需要它来更新，但我遗漏了一些东西。（如果您有任何关于如何简化计算结构的想法，我将不胜感激，尽管这不是必需的。感谢您帮助我学习。jsFiddle：jsfiddle.net/sadiem/crz2M/9
那是因为您正在绑定 keyup 事件来计算总计... [id^=subtotal_] 的更改事件甚至不会被触发，因为没有像 SPAN 元素的更改这样的事件.
如果你能总结一下你想要达到的目标，我可以试试看有没有更好的实现..
到期总额需要随时更新 4 个单独的小计中的任何一个更改。（并且各个小计需要随时更新计算 them 的字段，我认为这在 keyup 上）。那么我需要让这些单独的小计输入字段而不是跨度吗？
如何/何时更改各个小计？它们（跨度元素）是通过代码更新还是用户应该能够输入值？

【解决方案2】：

您还可以将输入分组到一个类中

例如。

input=price, class="price_inputs"

然后

$j(".price_inputs").keyup(function()
  //Do calculations here
});

或者在我的情况下，我有多个班级，因为我有小计，所以我将这些班级串在一起进行总计计算

$j(".inclassA,.inclassB,.inclassC").keyup(function()  //watches all the input classes
  //Get the subtotals from the various input class(groups) and add them together here
});

使用 id 只需替换 .用#ala CSS

也适用于 NaN 问题。 10 + 10 = 1010, 10*1 + 10*1 = 20, 0 = nil(Nan) 0*1=0

【讨论】：