所以我使用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中有一个基本函数来解决这个问题。我对这样的事情有一个粗略的想法,但还没有考虑过。我很感激这部分的帮助。
<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并找到总和。如果有更好的解决方案,我会乐意使用它。对不起,如果我正在做的事情根本没有任何意义。
答案 0 :(得分:1)
我建议您首先组织价格与价格适用的组之间的关系,例如:class="numAdults"
class="adultPrice"
(类似于孩子的活动和价格),说你最终会得到以下内容:
<div class="activity" id="ACT001">
<label for="AdultNum">Adults(18+):</label>
<select data-inline="true" data-mini="true" id="ACT001-AdultNum" name="ACT001-AdultNum" class="numAdults">
<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" class="adultPrice" />
<label for="ChildNum">Children(0-17):</label>
<select data-inline="true" data-mini="true" id="ACT001-ChildNum" name="ACT001-ChildNum" class="numChildren">
<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" class="childPrice" />
<input type="text" id="ACT001-Sum" readonly="readonly" class="total" />
</div>
使用该标记,活动的数量无关紧要,因为您可以使用其类名来定位相关元素,而不必使用id
或其他方法;在这种情况下,以下情况应该有效(尽管目前未经测试):
var pI = parseInt; // lazy way to access parseInt
function sumActivities(){
$('.activity').each(
function(){
var that = $(this),
numAdults = pI(that.find('.numAdults').val(),10),
adultPrice = pI(that.find('.adultPrice').val(),10),
numChildren = pI(that.find('.numChildren').val(),10),
childPrice = pI(that.find('.childPrice').val(),10),
total = pI((numAdults * adultPrice) + (numChildren * childPrice),10);
that.find('.total').val(total);
console.log(numAdults,adultPrice,numChildren,childPrice);
});
}
答案 1 :(得分:0)
<script type="text/javascript">
$(document).ready(function () {
// $("#Heading_FeeAllocation").append("<br/><select id='SelectStatus' width='15%' align=left><option value=Paid>Paid</option><option value=Pending>Pending</option><option value=Extra>Extra</option></select>");
$("#submit").bind("click", function () {
Loader.Show();
});
$("#Select_FeeAllocation").live("change", function () {
var selectedshiftid = $("#Select_FeeAllocation option:selected").val();
$.each($("#TableStudent tr"), function (index, item) {
if ($(item).find(".SelectCustom_FeeAllocation").is(":checked")) {
$(item).find(".Custom_FeeAllocation").attr('value', selectedshiftid);
}
});
});
});
$("input:checkbox").live("click", function () {
if ($(this).is(":checked")) {
$(this).attr("value", "True");
} else {
$(this).attr("value", "False");
}
});
$("#Add_All_Record").bind("click", function () {
if ($(this).attr("checked") == "checked") {
$("input.Select_FeeAllocation").attr("checked", "checked");
$("input.Select_FeeAllocation").attr("value", "True");
} else {
$("input.Select_FeeAllocation").removeAttr("checked");
$("input.Select_FeeAllocation").attr("value", "False");
}
});
$('.amount').blur(function () {
var sum = 0;
$('.amount').each(function() {
if($(this).val()!="")
{
sum += parseFloat($(this).val());
}
});
$("#grosstotal").val(sum);
});
</script>
<div class ="Left">
<div class="widgetbox">
<h3>
<span>Student List</span></h3>
<div class="content">
<table cellpadding="0" cellspacing="0" class="sTable3" width="100%">
<colgroup>
<col class="head1" width="5%" />
<col class="head0" width="8%" />
<col class="head1" width="20%" />
<col class="head0" width="10%" />
<col class="head1" width="7%" />
<col class="head0" width="10%" />
<col class="head1" width="10%" />
<col class="head0" width="10%" />
<col class="head1" width="10%" />
<col class="head0" width="10%" />
</colgroup>
<tbody>
<tr>
<th align="center">
<input type="checkbox" class="Check_All" id="Add_All_Record" name="Add_All_Record"
value="True" checked="checked">
Select All
</th>
@Html.Raw(ViewBag.Captions)
@*<th align="center" width="2%">
<input type="checkbox" class="Check_All" id="Add_All_Record" name="Add_All_Record"
value="True" checked="checked" />
Select All
</th>*@
@*<th align="center" width="5%">
Admission No
</th>
<th align="center" width="10%">
Student Name
</th>*@
<th align="center" width="20%">
Academic Year
</th>
<th align="center" width="20%">
Fee Type Name
</th>
<th align="center" width="20%">
Period Name
</th>
<th align="center" width="20%">
Fee Category Name
</th>
<th align="center" width="20%">
Amount
</th>
</tr>
</tbody>
</table>
<form method="post" action="#" class="form_class" novalidate="novalidate" enctype="multipart/form-data">
<table id="TableStudent" cellspacing="0" cellpadding="0" border="1" class="sTable3"
width="100%">
<tbody class="TableData">
@{
var count=0;
string Transferprefix = "CUSTOM_STUDENT_FEEALLOCATION_DETAIL[{0}].";
string strTransferprefix = "";
//string STUDENT_NAME = ViewBag.Name;
//string Admission_No = ViewBag.Admission;
foreach (var student1 in ViewBag.StudList)
{
strTransferprefix = String.Format(Transferprefix,count);
<tr rownumber="@count" >
<td align="center" width="2%">
<input type="checkbox" name="@(strTransferprefix + "SELECTED_STUDENT")" id="@("SELECTED_STUDENT-" + count)" class="SelectStudent" value="True" checked="checked" />
<input type="hidden" name="@(strTransferprefix + "Registration_Id")" id="@("Registration_Id-" + count)" value="@student1.Registration_Id" />
<input type="hidden" name="@(strTransferprefix + "Admission_No")" id="@("Admission_No-" + count)" value="@student1.Admission_No" />
</td>
</tr>
foreach (var student in ViewBag.FeesDetails)
{
//var count1 = 0;
//string Transferprefix1 = "CUSTOM_STUDENT_FEEALLOCATION_DETAIL[{0}].";
//string strTransferprefix1 = "";
strTransferprefix = String.Format(Transferprefix, count);
<tr rownumber="@count" >
<td align="center" width="2%">
@*<input type="checkbox" name="@(strTransferprefix + "SELECTED_STUDENT")" id="@("SELECTED_STUDENT-" + count)" class="SelectStudent" value="True" checked="checked" />
<input type="hidden" name="@(strTransferprefix + "Registration_Id")" id="@("Registration_Id-" + count)" value="@student.Registration_Id" />
<input type="hidden" name="@(strTransferprefix + "Admission_No")" id="@("Admission_No-" + count)" value="@student.Admission_No" />*@
<input type="hidden" name="@(strTransferprefix + "Fee_Master_Id")" id="@("Fee_Master_Id-" + count)" value="@student.Fee_Master_Id" />
<input type="hidden" name="@(strTransferprefix + "Class_Id")" id="@("Class_Id-" + count)" value="@student.Class_Id" />
<input type="hidden" name="@(strTransferprefix + "Academic_Year_Id")" id="@("Academic_Year_Id-" + count)" value="@student.Academic_Year_Id" />
<input type="hidden" name="@(strTransferprefix + "Academic_Year_Name")" id="@("Academic_Year_Name-" + count)" value="@student.Academic_Year_Name" />
<input type="hidden" name="@(strTransferprefix + "Fee_Type_Name")" id="@("Fee_Type_Name-" + count)" value="@student.Fee_Type_Name"/>
<input type="hidden" name="@(strTransferprefix + "Period_Name")" id="@("Period_Name-" + count)" value="@student.Period_Name" />
<input type="hidden" name="@(strTransferprefix + "Fee_Category_Name")" id="@("Fee_Category_Name-" + count)" value="@student.Fee_Category_Name"/>
<input type="hidden" name="@(strTransferprefix + "Amount")" id="@("Amount-" + count)" value="@student.Amount" />
@*<input type="hidden" name="@(strTransferprefix + "grosstotal")" id="@("grosstotal-" + count)" value="@student.grosstotal" class= "Amount" />*@
</td>
@*<td align="center" width="5%">
@student.Admission_No
</td>
<td align="left" width="10%">
@student.STUDENT_NAME
</td>*@
<td align="left" width="20%">
@student.Academic_Year_Name
</td>
<td align="left" width="20%">
@student.Fee_Type_Name
</td>
<td align="left" width="20%">
@student.Period_Name
</td>
<td align="left" width="20%">
@student.Fee_Category_Name
</td>
<td align="center" width="20%">
@student.Amount
</td>
@*<td align="left" width="8%">
<select name="@(strTransferprefix + "Attendance")" id="@("Attendance-" + count)" class="Custom_FeeAllocation" style = "width:104px;" rownumber = "@count">
<option value="Paid">Paid</option>
<option value="Pending">Pending</option>
<option value="Extra">Extra</option>
</select>
</td>*@
</tr>
}
}
}
</tbody>
</table>
<br />
<span style="float:right">TOTAL FEES    
<input type="text" id="grosstotal" name="grosstotal" value="" class="Amount"/></span>
<div class="form_default" style="clear: both;">
<button id="submit" type="submit" value="submit" class="showbutton">
SUBMIT
</button>
<button id="btnCancel" type="button" class="showbutton">
Cancel</button>
</div>
</form>
</div>
</div>
</div>
i want to sum the amount column, using jquery, i have list of different fees like, Tution fee, transport fee, foe which Amount is given, i want the total for all the fees in grosstotal text. Thanks