在 jQuery 中使用 each() 添加每一行的值

Question

我实现了以这种格式存储数据。这显示了每个类别的总成本(例如食物，衣服(。

var `obj` = {}; `obj` = {FOOD: 1000, CLOTHES: 2000}

新输入后应覆盖该值。例如，当选择"FOOD"并添加值"500"时，应将obj更新为obj = {FOOD: 1500, CLOTHES: 2000}。

但是，obj中的值会不断累加已计算的值。我只想将新值添加到每个类别的总数中。

var obj = {};
$('.singleRow').each(function(rowIndex, row) {
var key = $(row).find('select').val();
if (!obj[key]) {
obj[key] = 0;
obj[key] += $(row).find('.cost').val() * 1;
} else {
obj[key] += $(row).find('.cost').val() * 1;
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="0" class="singleRow" style="clear: both;">
<span id="add-row" class="glyphicon glyphicon-plus"></span>
<input class="tableForSpreadsheet" type="text" id="0:0">
<input class="tableForSpreadsheet" type="text" id="0:1">
<select class="tableForSpreadsheet form-control" id="0:2">
<option selected="selected">FOOD</option>
<option>CLOTHES</option>
</select>
<input class="tableForSpreadsheet cost" type="text" id="0:3">
</div>
</div>

由于我使用的是each()，因此总成本的计算始终从第一行开始。但是，我只希望每个值只添加一次。如何修复我的代码来实现这一点？

Answer 1

应该有一个地方可以触发代码段来计算值并更新obj。此外，可能还有另一个地方为用户提供添加新行的功能等等。

我想到了两件事;

1. 您可以从头开始计算所有食物和事物。因此，在循环访问之前清空对象。
2. 您可以单独向每一行添加事件侦听器，并相应地更新obj。更新一个后，您应该删除其事件侦听器，以免弄乱数据。否则，您需要记住以前的值并执行更复杂的计算，例如从obj中删除以前的值并添加新值。