JS没有将值传递给html div标签
我在我的一个MVC视图中有以下代码：
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
$(document).ready(function() {
getTotal();
CalculateDays();
});
$("#form1").on("input", function() {
getTotal();
CalculateDays();
});
function getTotal(){
var totalcart = 0;
$('#form1 > table').each(function() {
$(this).find("tr").each(function(){
if( $( this ).has( ".inputdays" ).length > 0){
var total = $(this).find(".inputquantity").find("input").val() * $(this).find(".hotelprice").html() * $(this).find(".inputdays").find("input").val();
$(this).find("#hoteltotal").text(total);
totalcart += total;
}else{
var total = $(this).find(".inputquantity").html() * $(this).find(".price").html();
$(this).find("#carttotal").text(total);
totalcart += total;
}
});
});
$("#total").html(totalcart);
}
function CalculateDays(){
$('#form1 > table').each(function() {
$(this).find("tr").each(function(){
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var today = new Date();
// datetimepicker1
$(this).find("#datetimepicker1").find("input").attr("min", calc_date(today, 0));
var firstDate = new Date($(this).find("#datetimepicker1").find("input").val() + "T00:00:00");
// datetimepicker2
$(this).find("#datetimepicker2").find("input").attr("min", calc_date(firstDate, 1));
var secondDate = new Date($(this).find("#datetimepicker2").find("input").val() + "T00:00:00");
// difference dtp1 and dtp2
var date1_ms = firstDate.getTime()
var date2_ms = secondDate.getTime()
var difference_ms = Math.abs(date1_ms - date2_ms) + 86400000;
diffDays = Math.round(difference_ms/oneDay);
// datetimepicker3
$(this).find("#datetimepicker3").find("input").attr("min", calc_date(today, 0));
$(this).find("#datetimepicker3").find("input").attr("max", calc_date(today, 14));
if((!isNaN(diffDays)) && (firstDate.getTime() <= secondDate.getTime())){
$(this).find(".inputdays").find("input").val(diffDays);
}
else{
$(this).find(".inputdays").find("input").val("0");
}
getTotal();
});
});
}
function calc_date(currentday, adddays){
currentday.setDate(currentday.getDate() + adddays);
var dd = currentday.getDate();
var mm = currentday.getMonth()+ 1;
var yyyy = currentday.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
var myday = yyyy + "-" + mm + "-" + dd;
return myday;
}
</script>
}
此代码只计算输入值，如下图所示：
正如您所看到的，对于Lines和Hotels，计算值是有效的。但是对于实际总数，页面底部没有显示任何值。使用最后一行代码解析totalcart：
$("#total").html(totalcart);
我的HTML看起来像这样，只包括相关部分（我知道它有点邋）：
` <tr class="table">
<td id="shoppingcart">
@Html.DisplayFor(m => Model.Cart[i].Departure)
</td>
<td id="shoppingcart">
@Html.DisplayFor(m => Model.Cart[i].StartTime)
</td>
<td id="shoppingcart">
@Html.DisplayFor(m => Model.Cart[i].Destination)
</td>
<td id="shoppingcart">
@Html.DisplayFor(m => Model.Cart[i].ArrivalTime)
</td>
<td id="shoppingcart">
<div id='datetimepicker3'>
<input type='date' class="form-control" />
</div>
</td>
<td id="shoppingcart" class="price">
@{var Subtotaal = Model.Cart[i].Price + Model.Class[i].Price;}
@Subtotaal
</td>
<td id="shoppingcart" class="inputquantity">
@Html.DisplayFor(m => Model.Cart[i].Quantity, new { @class = "form-control" })
</td>
<td id="shoppingcart">
<div class="subtotal">
€ <span id="carttotal"></span>
</div>
</td>
<td id="shoppingcart">
@Html.ActionLink("Remove from cart", "DeleteCart", "ShoppingCart", new { id = Model.Cart[i].Line_id }, null)
</td>
<td id="shoppingcart">
@Html.ActionLink("Choose hotel", "GetHotelsbyCity", "Hotel", new { city = Model.Cart[i].Destination }, null)
</td>
</tr>
for (var j = 0; j < Model.Cart[i].Quantity; j++)
{
<tr>
<td id="shoppingcart" class="inputquantity">
@Html.Label("First Name:", "First Name:", new { @class = "form-control" })
</td>
<td id="shoppingcart" class="inputquantity">
@Html.TextBox("First Name", null, new { @class = "form-control" })
</td>
<td id="shoppingcart" class="inputquantity">
@Html.Label("Last Name:", "Last Name:", new { @class = "form-control" })
</td>
<td id="shoppingcart" class="inputquantity">
@Html.TextBox("Last Name", null, new { @class = "form-control" })
</td>
</tr>
}
}
<tr>
</table>
}
<hr />
if (Model.Hotel != null)
{
<h3>Hotel</h3>
<table class="table">
<tr class="table">
<th>
@Html.DisplayNameFor(model => model.Hotel[0].Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Hotel[0].Adress)
</th>
<th>
@Html.DisplayNameFor(model => model.Hotel[0].Price) (€)
</th>
<th>
@Html.DisplayNameFor(model => model.Hotel[0].Quantity)
</th>
<th>
@Html.DisplayNameFor(model => model.Hotel[0].Checkin)
</th>
<th>
@Html.DisplayNameFor(model => model.Hotel[0].Checkout)
</th>
<th>
@Html.DisplayNameFor(model => model.Hotel[0].Days)
</th>
<th></th>
<th></th>
</tr>
@for (var i = 0; i < Model.Hotel.Count; i++)
{
@Html.HiddenFor(m => Model.Hotel[i].Hotel_id)
<tr class="table">
<td id="shoppingcart">
@Html.DisplayFor(m => Model.Hotel[i].Name)
</td>
<td id="shoppingcart">
@Html.DisplayFor(m => Model.Hotel[i].Adress)
</td>
<td id="shoppingcart" class="hotelprice">
@Html.DisplayFor(m => Model.Hotel[i].Price)
</td>
<td id="shoppingcart" class="inputquantity">
@Html.TextBoxFor(m => Model.Hotel[i].Quantity, new { @class = "form-control" })
</td>
<td id="shoppingcart">
@*Datepicker werkt met input id en moet unieke id's hebben bij td, maar dit aanpassen hielp niet*@
@*<td>
<div>
<input id='datetimepicker1' type='date' class="form-control" />
</div>
</td>
<td>
<div>
<input id='datetimepicker2' type='date' class="form-control" />
</div>
</td>*@
<div id='datetimepicker1'>
<input type='date' class="form-control" />
</div>
</td>
<td id="shoppingcart">
<div id='datetimepicker2'>
<input type='date' class="form-control" />
</div>
</td>
<td id="shoppingcart" class="inputdays">
@Html.TextBoxFor(m => Model.Hotel[i].Days, new { @class = "form-control" })
</td>
<td id="shoppingcart">
<div class="subtotal">
€ <span id="hoteltotal"></span>
</div>
</td>
<td id="shoppingcart">
@Html.ActionLink("Remove from cart", "DeleteHotel", "ShoppingCart", new { id = Model.Hotel[i].Hotel_id }, null)
</td>
</tr>
}
<tr>
</table>
}
else
{
@Html.Raw("No hotels selected, please check owr hotels:") @Html.ActionLink("Choose hotel", "Index", "Hotel")
}
<div id="cart-total" class="total">
<span>Total:</span> € <span id="total"></span>
</div>
}
}
else
{
@Html.Raw("Your shoppingcart is empty at the moment")
}
<div class="form-group">
<div>
<a class="btn btn-default" @Html.ActionLink("Checkout", "Payment", "ShoppingCart")
<a class="btn btn-default" @Html.ActionLink("Continue Shopping", "Index", "Line")
</div>
</div>`
这是什么问题？提前谢谢！
1 个答案:
答案 0 :(得分：0)
我无法看到您的代码中的哪个位置触发getTotal这是一个常见的错误
我无法看到其他代码是如何工作的，所以我不能说但是函数本身不会运行，它需要由事件触发或在代码中调用，如下所示;
function getTotal(){
...
}
// run the function
getTotal();
或者它可以像这样自我调用;
(function getTotal(){
...
})()
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？