我想一次加载多个AJAX页面。我发现this example可以加载2个关卡,但是我需要更多的关卡。

我修改代码。在index.html中,我将div添加到加载级别3的内容

<div id="content2">&nbsp;</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/

10-12 12:39
查看更多