javascript - 将所有 Javascript Div 添加到总金额中

Question

好的，所以我有一个 javascript 函数设置来添加一个带有 ID 的 div 并对其进行总计，并将值显示在顶部。嗯，它工作得很好，但是由于它有多个 ID，我对如何获取总数感到困惑!

function GetCost(ID) {
    var cost = $('#Cost'+ID).val();
    var income = $('#Income'+ID).val();
    var owned = $('#Own'+ID).val();
    var new_cost = number_format(cost * owned / 10 + 1000);
    $('#PropCost'+ID).html('Cost: $'+new_cost);
    $('#TotalIncome').html(number_format(income * owned));
}

如您所见，它带有一个 Div 和一个 ID。这是带有多个 div 的 HTML。它们被不同的 ID 分开，例如:owned1，然后是owned2。

<!-- Property Start-->
<div id="PropBlock">
<form action="javascript:void" method="post">
<div id="PropName">News Stand</div>
<div align="center"><img src="http://cdn0.mobwarsapp.com/rpg_images/opensocial/mob/ingame/territory/big/newsstand.gif" /></div>
<div id="PropIncome">Income: $100</div>
<div id="PropCost1" class="PropCost">Cost: $1,000</div>
<div id="PropOwn" align="center">
Own: <input type="text" ID="Own1" value="0" size="3" maxlength="5" onkeyup="GetCost(1)" />
</div>
<div id="PropBuy">
<select id="Numbers1">
 <option value="1">1</option>    
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option> 
</select>
<input type="submit" value="Calculate" onClick="CalcProp(1)" />
<input type="hidden" id="Cost1" value="1000" />
<input type="hidden" id="Income1" value="100" />
<input type="hidden" id="Name1" value="News Stand" />
</form>
</div>
</div>
<!-- Property End -->
<!-- Property Start-->
<div id="PropBlock">
<form action="javascript:void" method="post">
<div id="PropName">Empty Lot</div>
<div align="center"><img src="http://cdn0.mobwarsapp.com/rpg_images/opensocial/mob/ingame/territory/big/empty_lot.gif" /></div>
<div id="PropIncome">Income: $100</div>
<div id="PropCost2" class="PropCost">Cost: $4,500</div>
<div id="PropOwn" align="center">
Own: <input type="text" ID="Own2" value="0" size="3" maxlength="5" onkeyup="GetCost(2)" />
</div>
<div id="PropBuy">
<select id="Numbers2">
 <option value="1">1</option>    
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option> 
</select>
<input type="submit" value="Calculate" onClick="CalcProp(2)" />
<input type="hidden" id="Cost2" value="4500" />
<input type="hidden" id="Income2" value="100" />
<input type="hidden" id="Name2" value="Empty Lot" />
</div>
</form>
</div>
<!-- Property End -->

这是收入分配。

<div id="Basic" align="center">Basic Properties: (Income: $<span id="TotalIncome">0</span>)</div>

那么，当我更改 property1 的表单时，它是一个 onkeyup 函数。它将显示数学总计。但是，如果我更改 property2 的表单，它将显示属性 2 的总数学值。我如何将 2 加起来并显示两者相加的总和？我将有大约 15 个不同的值，当您更改值时，所以我有点困惑该怎么做，请帮忙!谢谢!! 为了理解我在说什么，这是我的网站链接:http://psychowars.net/addtrain/property_cost

Answer 1

我不太确定你想要什么。假设您想要获得总计(所有收入*拥有的总和)并将其放入 #TotalIncome，这里您有(用所有这些替换您的 GetCost):

//Just calculates. Doesn't affect UI
function getCostsById(ID) {
    var cost = $('#Cost'+ID).val();
    var income = $('#Income'+ID).val();
    var owned = $('#Own'+ID).val();
    var new_cost = cost * owned / 10 + 1000;        
    return {
       cost: cost,
       income: income,
       owned: owned,
       new_cost: new_cost
    };
}

//I assume total is sum of every income*owned
function getTotalCost(){
    var total = 0;
    for(var id=1; id<=10; id++){
        var costs = getCostsById(id)
        total += costs.income * costs.owned;
    }
    return total;
}

//This affects UI
function GetCost(ID){
    var costs = getCostsById(ID);    
    $('#PropCost'+ID).html('Cost: $'+number_format(costs.new_cost) );
    $('#TotalIncome').html(number_format(getTotalCost()));
}

干杯，来自玻利维亚拉巴斯