我想一次加载多个AJAX页面。我发现this example可以加载2个关卡,但是我需要更多的关卡。
我修改代码。在index.html中,我将div添加到加载级别3的内容
<div id="content2"> </div>
在main.js中,我是克隆函数。和整个文件:
$(document).ready(function(){
//References
var cars = $("#menu li");
var tos = $("#menu-to li");
var loading = $("#loading");
var content = $("#content");
var content2 = $("#content2");
//Manage click events
cars.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "m3":
content.slideUp();
content.load("/mazda/v2/js/mazda_3.html #m3-to", hideLoading);
content.slideDown();
break;
case "news":
content.slideUp();
content.load("/mazda/v2/js/sections.html #section_news", hideLoading);
content.slideDown();
break;
case "interviews":
content.slideUp();
content.load("/mazda/v2/js/sections.html #section_interviews", hideLoading);
content.slideDown();
break;
case "external":
content.slideUp();
content.load("/mazda/v2/js/external.html", hideLoading);
content.slideDown();
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});
tos.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "m3_to_1":
content2.slideUp();
content2.load("/mazda/v2/js/mazda_3.html #m3-to-1", hideLoading);
content2.slideDown();
break;
case "m3_to_2":
content2.slideUp();
content2.load("/mazda/v2/js/mazda_3.html #m3-to-2", hideLoading);
content2.slideDown();
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
而我是mazda_3.html
<div id="m3-to">
<ul id="menu-to">
<li id="m3_to_1">One</li>
<li id="m3_to_2">Two</li>
</ul>
Level Two
</div>
<div id="m3-to-1">
Level Three 1
</div>
<div id="m3-to-2">
Level Three 2
</div>
控制台中没有错误,但不起作用。第三级未加载。
最佳答案
使用live
功能将喀哒声孔绑定到tos
控件
tos.live('click',function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "m3_to_1":
content2.slideUp();
content2.load("/mazda/v2/js/mazda_3.html #m3-to-1", hideLoading);
content2.slideDown();
break;
case "m3_to_2":
content2.slideUp();
content2.load("/mazda/v2/js/mazda_3.html #m3-to-2", hideLoading);
content2.slideDown();
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});
关于javascript - JQuery中的多个AJAX加载,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7228628/