所以我使用 MVC 来解析活动的 XML 文件并在页面上显示每个活动。每个活动都有自己的价格/成人和价格/儿童,用户可以根据他们之前提交的表格选择成人和儿童的数量。每个活动都有自己的总价。例如,跳伞是 5 美元/成人和 1 美元/儿童。假设我选择了 4 位成人和 3 位儿童,活动元素中的总价格将显示为 23 美元。
我遇到的问题是如何使用 jquery 执行此操作,因为我可以接收 N 数量的活动。这是一个活动元素的样子(为了简单起见,我把它说得很清楚)。
带有 Razor 的 HTML
<li>
<div class="activity" id="@item.ActivityID"> <!--id="ACT001"-->
@Html.DropDownList(item.ActivityID+"-AdultNum", AdultNum,
new { data_mini="true", data_inline="true" })<br /> <!--id="ACT001-AdultNum-->
Price/Adult C$:@Html.TextBox(item.ActivityID+"-AdultPrice", item.PricePerAdult,
new { @readonly = "readonly"}) <!--id="ACT001-AdultPrice-->
@Html.DropDownList(item.ActivityID+"-ChildNum", ChildNum,
new { data_mini="true", data_inline="true" })<br /> <!--id="ACT001-ChildNum-->
Price/Child C$: @Html.TextBox(item.ActivityID+"-ChildPrice", item.PricePerChild,
new { @readonly = "readonly"})
<input type="text" readonly="readonly" id="@item.ActivityID-Sum"/><!--id="ACT001-Sum"-->
</div>
</li>
MVC 生成的 HTML
<li>
<div class="activity" id="ACT001">
<label for="AdultNum">Adults(18+):</label>
<select data-inline="true" data-mini="true" id="ACT001-AdultNum" name="ACT001-AdultNum">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br />
Price/Adult C$:<input id="ACT001-AdultPrice" name="ACT001-AdultPrice"
readonly="readonly" type="text" value="19.00" />
<label for="ChildNum">Children(0-17):</label>
<select data-inline="true" data-mini="true" id="ACT001-ChildNum" name="ACT001-ChildNum">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br />
Price/Child C$: <input id="ACT001-ChildPrice" name="ACT001-ChildPrice"
readonly="readonly" type="text" value="11.00" />
<input type="text" id="ACT001-Sum" readonly="readonly"/>
</div>
</li>
所以基本上我想要 ACT001-Sum = ACT001-AdultNum * ACT001-AdultPrice + ACT001-ChildNum * ACT001-ChildPrice。然而,这只是一项活动,并且有 N 项活动。第二个活动将遵循 ACT002-Sum、ACT002-AdultNum、ACT002-AdultPrice、ACT002-ChildNum 的格式,第三个活动将有 ACT003... 等等。
我想知道如何在 jquery 中有 1 个基本函数来解决这个问题。我对这样的事情有一个粗略的想法,但还没有考虑清楚。我将不胜感激这部分的帮助。
<script type="text/javascript">
$('.activity').each(function() {
var id = $(this).attr("id"); <!--take the "ACT001" part" -->
var adultnum = id + "-AdultNum";
var adultprice = id + "-AdultPrice";
var childnum = id + "-ChildNum";
var childprice = id + "-ChildPrice";
$(#id+"-Sum").val(#adultnum.val() * #adultprice.val() +
#childnum.val() * #childprice());
});
</script>
我很确定我的语法都是错误的,但我基本上想获取每个活动的 ID 并附加 -AdultNum、-AdultPrice、-ChildNum 和 -ChildPrice 并找到总和。如果有更好的解决方案,我很乐意改用它。如果我所做的实际上没有任何意义,我很抱歉。