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から、そのスコープ内の他の関数に使用するでしょう。

ここでのもう 1 つの観察は、パラメーターを使用して関数を設定することloadPageですが、呼び出しで何も渡していないことです。

あなたのアプローチはうまくいくと思います。

于 2013-11-06T18:43:36.333 に答える