我在加载页面的特定部分时遇到问题。没什么太花哨的。这个想法是当用户单击下一个/上一个日期/周/月时，日期将相应地加载，这将在后端处理。但在此之前，我需要在前端进行一些格式化，如下所示：
<script>
//the prev/next link values will change when any one are clicked. This function will append the appropriate date to the link ranging from the prev month to the next month
function dateChange(dateInput){
//creating new instance of the date based on the date passed into the function
var nextDay = new Date(dateInput);
var nextWeek = new Date(dateInput);
var nextMonth = new Date(dateInput);
var prevDay = new Date(dateInput);
var prevWeek = new Date(dateInput);
var prevMonth = new Date(dateInput);
//the date will change according to the date passed in from 1 day to 1 month
nextDay.setDate(nextDay.getDate()+1);
nextWeek.setDate(nextWeek.getDate()+7);
nextMonth.setDate(nextMonth.getDate()+30); //need to add more complex code to handle next month
prevDay.setDate(prevDay.getDate()-1);
prevWeek.setDate(prevWeek.getDate()-7);
prevMonth.setDate(prevMonth.getDate()-30); //need to add more complex code to handle next month
//The following will go into another function which formats the date in such a way that vbscript can handle it.
nextDay = dateFormat(nextDay);
nextWeek = dateFormat(nextWeek);
nextMonth = dateFormat(nextMonth);
prevDay = dateFormat(prevDay);
prevWeek = dateFormat(prevWeek);
prevMonth = dateFormat(prevMonth);
//updating the values for the a tag in the onclick attribute. and appending to the strVar variable
var strVar="";
strVar += " <div class=\"prev\">";
strVar += " <p>Prev<\/p>";
strVar += " <a href=\"\" onClick=\"dateChange('"+prevMonth+"')\">< month<\/a>";
strVar += " <a href=\"\" onClick=\"dateChange('"+prevWeek+"')\">< week<\/a>";
strVar += " <a href=\"\" onClick=\"dateChange('"+prevDay+"')\">< day<\/a>";
strVar += " <\/div>";
strVar += " ";
strVar += " <div class=\"next\">";
strVar += " <p>Next<\/p>";
strVar += " <a href=\"\" onClick=\"dateChange('"+nextMonth+"')\">month ><\/a>";
strVar += " <a href=\"\" onClick=\"dateChange('"+nextWeek+"')\">week ><\/a>";
strVar += " <a href=\"\" onClick=\"dateChange('"+nextDay+"')\">day ><\/a>";
strVar += " <\/div>";
//For each .title it finds, it will look for its child .dateselect and remove .dateselect child. It will then append new data to .dateselect with the updated values
$(".title").each(function(index, element) {
$(this).find('.dateSelect').children().remove();
$(this).find('.dateSelect').append(strVar);
var boatName = $(this).next().attr('id');
if(!$(this).next().hasClass('hide')){
if(boatName == "SailingCatamaran"){
$(this).next().load("availability.asp?boatType=SailingCatamaran&date="+dateInput+"");
//alert(dateInput);
}
else if(boatName == "PowerCatamaran"){
$(this).next().load("availability.asp?boatType=PowerCatamaran&date="+dateInput+"");
}
else{
$(this).next().load("availability.asp?boatType=nothing&date="+dateInput+"");
}
}
});
//Stops propagation so when day,week or month are clicked, the table won't disappear
event.stopPropagation()
}
//Function is to receive the date in its raw format and convert it into YYYY,MM,DD
function dateFormat(theDate){
theDate = ('0' + (theDate.getMonth()+1)).slice(-2) + ','
+ ('0' + theDate.getDate()).slice(-2) + ','
+ theDate.getFullYear();
return theDate;
}
$(document).ready(function() {
//alert(dateCounter);
var dateCounter;
if (dateCounter == null){
var current = new Date();
current = dateFormat(current);
dateChange(current);
dateCounter = 0; //anything but null
}
//alert(dateCounter);
/*$("table").first().load("availability.asp?boatType=PowerCatamaran&date="+current+"", function(response, status, xhr){
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("table").html(msg + xhr.status + " " + xhr.statusText);
}
});*/
$(".title").click(function(){
$(this).next().toggleClass("hide");
var boatName = $(this).next().attr('id');
if(!$(this).next().hasClass('hide')){
if(boatName == "SailingCatamaran"){
$(this).next().load("availability.asp?boatType=SailingCatamaran&date=");
}
else if(boatName == "PowerCatamaran"){
$(this).next().load("availability.asp?boatType=PowerCatamaran&date=");
}
else{
$(this).next().load("availability.asp?boatType=nothing&date=");
}
}
$(this).children().last().toggleClass("hide");
$(this).find('.dateSelect').toggleClass("hide");
//alert("title being clicked");
});
});
</script>
我很困惑为什么当我单击以下链接时整个页面不断重新加载：
<div class="title">
<h2>Catamarans</h2>
<div class="dateSelect">
<div class="prev">
<p>Prev</p>
<a href="" onClick="dateChange('someDate')">< month</a>
<a href="" onClick="dateChange('someDate')">< week</a>
<a href="" onClick="dateChange('someDate')">< day</a>
</div>
<div class="next">
<p>Next</p>
<a href="" onClick="dateChange('someDate')">month ></a>
<a href="" onClick="dateChange('someDate')">week ></a>
<a href="" onClick="dateChange('someDate')">day ></a>
</div>
</div>
<div class="expand hide">
Click to Expand
</div>
</div>
我确认整个页面不断重新加载，因为 document.ready 不断触发。这个想法是加载当前日期一次。但是页面不断重新加载，因此当前日期一直被使用。我只是不明白现在发生了什么。任何帮助将不胜感激！