1

我正在学习一些基本的 JQuery，它将 Ajax 查询的数据从文本文件附加到 div 元素中。当添加 AJAX 代码和从 fadeOut 效果调用函数时，程序不起作用。否则，fadeOut 工作正常。

我应该在另一个文件中编码 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 回答