1

请原谅我需要一点帮助，我没有编码员的大脑，实际上我对我能做到这一点印象深刻，但现在我需要一点帮助。

我正在尝试构建一个播放器以将 html 文件从 xml 文件加载到 div 中，然后能够使用上一个和下一个按钮浏览页面。到目前为止，我已经设法加载 xml，将其转换为数组并加载第一页，但是当我单击上一个和下一个按钮时，我得到“页面未定义”。

这是代码：

$(document).ready(function(){

    var i = 0;

    $.ajax({
        type: "GET",
        url: "studyguide/new_course.xml",
        dataType: "xml",
        success: function(xml) {          
            pages = parseXml(xml)
            doStuff(pages);
            loadFirstPage(pages);
        } // END success
    }); //END ajax

    function parseXml(xml) {
        var pages = [];
        $(xml).find("page").each(function() {
            pages.push({
                title: $(this).find("title").text(), 
                url: $(this).find("url").text()
            }); // END .push
        }); // END .each
        return pages;
    } // END parseXML

    function doStuff(pages) {
        //Do some javascript stuff with the response
        alert(pages[0].title);
        alert(pages[0].url);
    } // END doStuff

    function loadFirstPage(pages){
        //alert(pages[i].url);
        $('#displayResults').html('<img src="../images/495.gif" />');
        $( "#displayResults" ).load(pages[i].url, function() {
        }) //END .load
    }; //END loadFirstPage

    function loadPage(pages){
        //alert(pages[i].url);
        $('#displayResults').html('<img src="../images/495.gif" />');
        $( "#displayResults" ).load(pages[i].url, function() {
        }) //END .load
    };// END loadPage

    $('#prev').bind('click', function(pages) {
        i--;
        //alert(i);
        loadPage();
    }) //END click

    $('#next').bind('click', function(pages) {
        i++;
        //alert(i);
        loadPage();
    }) // END click

}); // END ready

和xml：

<?xml version="1.0" encoding="iso-8859-1"?>
<course>
    <section name = "Section One">
        <page>
            <title>Page 1</title>
            <url>studyguide/page1.html</url> 
            <instructions></instructions>   
        </page> 
        <page>
            <title>Page 2</title>
            <url>studyguide/page2.html</url> 
            <instructions></instructions>   
        </page>
        <page>
            <title>Page 3</title>
            <url>studyguide/page3.html</url> 
            <instructions></instructions>   
        </page>
    </section>
    <section name = "Section Two">
        <page>
            <title>Page 1</title>
            <url>studyguide/page4.html</url> 
            <instructions></instructions>   
        </page>
        <page>
            <title>Page 2</title>
            <url>studyguide/page5.html</url> 
            <instructions></instructions>   
        </page>
    </section>
</course>

所以我有 2 个问题，首先我如何使数组全局化，以便 loadPage 函数可以使用它。其次，首先有没有更好的方法来做到这一点。xml 可以包含 5 页或 100 页，所以我想保持动态。

谢谢

谢谢你们的帮助。我做了一些更改，现在我得到“pages[I] is undefined。抱歉，我不是天生的编码员，所以你必须和我一起慢慢来。

$(document).ready(function(){

    var i = 0;
    var pages = [];

    $.ajax({
        type: "GET",
        url: "studyguide/new_course.xml",
        dataType: "xml",
        success: function(xml) {          
            pages = parseXml(xml)
            doStuff(pages);
            loadFirstPage(pages);
        } // END success
    }); //END ajax

    function parseXml(xml) {
        //var pages = [];
        $(xml).find("page").each(function() {
            pages.push({
                title: $(this).find("title").text(), 
                url: $(this).find("url").text()
            }); // END .push
        }); // END .each
        return pages;
    } // END parseXML

    function doStuff(pages) {
        //Do some javascript stuff with the response
        alert(pages[0].title);
        alert(pages[0].url);
    } // END doStuff

    function loadFirstPage(pages){
        //alert(pages[i].url);
        $('#displayResults').html('<img src="../images/495.gif" />');
        $( "#displayResults" ).load(pages[i].url, function() {
        }) //END .load
    }; //END loadFirstPage

    function loadPage(pages){
        //alert(pages[i].url);
        $('#displayResults').html('<img src="../images/495.gif" />');
        $( "#displayResults" ).load(pages[i].url, function() {
        }) //END .load
    };// END loadPage

    $('#prev').bind('click', function(pages) {
        i--;
        //alert(i);
        loadPage(pages);
    }) //END click

    $('#next').bind('click', function(pages) {
        i++;
        alert(i);
        loadPage(pages);
    }) // END click

}); // END ready
4

1 回答 1

0

要回答第一个问题，如果您不在var变量声明前放置 a，它将变为全局（在窗口对象上）。这样做通常被认为是一个坏主意。我个人可能会在您的ready函数中声明该变量，然后将其用于该范围内的其他函数。

这里的另一个观察是您使用参数设置loadPage函数，但是在调用它时您没有传递任何东西。

我认为你的方法工作得很好。

于 2013-11-06T18:43:36.333 回答