jQuery和Ajax-使用链接注入文件内容

Question

我正在寻求实现以下目标。 我有一个最初为空的绝对定位的div（#description），位于另一个div（#zoom）的TOP上，当用户在页面一侧选择15个左右的缩略图之一时，该图片会注入大图像。

我在一侧有一个链接，例如：

<div id="whatisit"><a href="description.php"></div>

则单击该文件时应将“ description.php”文件内容注入网站上的#description div中。 首先，当然需要“淡出” #zoom的内容。

我有以下代码，试图将它们组合在一起以完成工作。

 <script language="javascript">
$(document).ready(function() {
    $("#whatisit a").click(function() {
        var descPath = $(this).attr("href");
        $("#zoom img").fadeOut("slow", function() {
            $(this).attr({ src:descPath }).fadeIn("slow");
      });
    return false;
    });
});
</script>

它淡出#zoom的内容，但不注入或淡入“ descriptions.php”文件内容。 难道我做错了什么？ 还是错过了什么？

非常感谢您的帮助。

Answer 1

您将必须使用AJAX get请求，因此请执行以下操作：

<script language="javascript">
$(document).ready(function() {
    $("#whatisit a").click(function() {
        var descPath = $(this).attr("href");
        $.get(descPath, function(html_returned) {
            $("#zoom img").fadeOut("slow", function() {
                $("#description").html(html_returned).fadeIn("slow");
            });
        }, "html");
        return false;
    });
});
</script>

这应该将description.php的内容注入#description中。

Answer 2

好吧，看来您正在尝试通过将其src属性设置为div的方式来将内容推入div ，这不会做任何事情。 如果这是一个有意义的iframe ，则可能会出现。 否则，您将不得不有点幻想将methods.description.php的内容拉入div。