Question

请原谅我需要一点帮助，我没有编码器的大脑，实际上我印象深刻，但是现在我需要一些帮助。

我正在尝试构建一个播放器，将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>

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

由于

感谢您的帮助。我做了一些修改，现在我得到“页面[我]未定义。抱歉，我不是一个编码器，所以你必须慢慢跟我一起去。

$(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

Answer 1

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

此处的另一个观察是您使用参数设置loadPage函数，但是在调用它时您没有传递任何内容。

我认为你的方法效果很好。

如何使Javascript数组全局化？

1 个答案: