Question

我正在学习一些基本的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>

SCRIPT

$(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;
        }
    });
}

Answer 1

您需要将myFunction的引用传递给回调。您当前的方法是在页面加载时调用您的函数。试试这个：

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

function getData() {
    $.get("testfile.txt", function(data) {
        $("#myDiv").html(data).fadeIn("slow");
    });
}

FadeOut效果不调用AJAX函数代码

1 个答案: