1

Ajax クエリ データをテキスト ファイルから div 要素に追加する基本的な JQuery を学習しています。AJAX コードが追加された場合、および関数がフェードアウト効果から呼び出された場合、プログラムは動作しません。それ以外の場合、フェードアウトは正常に機能します。

AJAX を別のファイルにコーディングしてリンクすることになっていますか? このコードのどこが間違っていますか? 質問のタイトルが正確でない場合は申し訳ありません。

HTML

<html>    
    <head>
        <title>Help Me</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="test.js" type="text/javascript"></script>
    </head>

    <body>
        <div align="center" id = "div1" >
            <img src="pic1" width="200" height="200" alt="" id = "pic1" />
            <img src="pic2" width="200" height="200" alt="" id = "pic2" />
            <img src="pic3" width="200" height="200" alt="" id = "pic3" />
        </div>
        <div id = 'myDiv'></div>
    </body>
</html>

脚本

$(document).ready(function() {
    $("#pic1").click(function() {
        $("#div1").fadeOut("slow", myFunction());
        $("#myDiv").fadeIn("slow");
    });

    $("#pic2").click(function() {
        $("#div1").fadeOut("slow");
    });

    $("#pic3").click(function() {
        $("#div1").fadeOut("slow");             
    }); 
});

var xmlhttp;
function loadXMLDoc(url, cfunc) {   
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = cfunc;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

function myFunction() {
    loadXMLDoc("testfile.txt", function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}
4

1 に答える 1

1

myFunctionの参照をコールバックに渡す必要があります。現在のメソッドは、代わりにページの読み込み時に関数を呼び出しています。これを試して：

$("#pic1").click(function() {
    $("#div1").fadeOut("slow", getData); // note: no () brackets
});

function getData() {
    $.get("testfile.txt", function(data) {
        $("#myDiv").html(data).fadeIn("slow");
    });
}
于 2013-01-27T13:53:14.260 に答える