在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删除先前的值并添加新的值。