如何使用 jQuery答案

【问题标题】：How to use jQuery如何使用 jQuery
【发布时间】：2008-12-16 08:40:10
【问题描述】：

我在文件Main.html 和ajax.php 中编写了jQuery 代码。 ajax.php文件将图片链接返回到Main.html。

现在在Main.html，我有 Image1、Image2、Image3 等。

我的Main.html 文件：

<html>
    ...
    # ajax.php Call
    ...
    # Return fields from Ajax.php
</html>

我的 ajax.php 文件

echo "<a href='src1'><img src='src_path1' id='fid1' alt='Name1' /></a>Click To View image1\n";
echo "<a href='src2'><img src='src_path2' id='fid2' alt='Name2' /></a>Click To View image2\n";
// etc.

所以，在执行 ajax.php 之后，我在 Main.html 中获得了图像位置。

现在，当我单击 Main.html 中的 Image1 链接时，相应的图像应显示在同一窗口中。

所以我考虑是否再次使用 jQuery 在同一页面上查看图像。我怎样才能做到这一点？

【问题讨论】：

您能发布您的实际 jQuery 代码吗？

标签： jquery ajax image

【解决方案1】：

听起来您可能想看看jQuery lightbox plugin。

【讨论】：

【解决方案2】：

文件ajax.php输出必须返回以下HTML：

<a href="#" class="imageLink" title="fid1"><img src="src1" id="fid1" alt="Name1" style="display:none;" /><span>Click To View image1</span></a> 
<a href="#" class="imageLink" title="fid2"><img src="src2" id="fid2" alt="Name2" style="display:none;" /><span>Click To View image2</span></a> 
<a href="#" class="imageLink" title="fid3"><img src="src3" id="fid3" alt="Name3" style="display:none;" /><span>Click To View image3</span></a>

还有jQuery代码：

$(document).ready(function(){
    $("a.imageLink").click(function(){
            $("#"+$(this).attr("title")).show();
        $(this).find("span").hide();
    });
});

【讨论】：

【解决方案3】：

你可以这样做：

在你的 html 中定义这个 div：

<div id="pictureframe"></div>

现在在图像链接上添加一个 onclick 处理程序来执行以下操作：

$("#pictureframe").load(image_url);

您需要构建代码以轻松检索 image_url。

【讨论】：

【解决方案4】：

试试这个：

在您的页面中放置一个隐藏的 div，其中包含图像（标签 img）：

<div id="imageDivisionHolder" style="disply:none;">
    <img id="imageItemHolder" src="" alt="" />
</div>

为来自文件ajax.php 的所有图像设置类，并将大图像源放在它的属性中。我把它放在Title 属性中。

<img src='src_path1' id='fid1' alt='Name1' class='item' Title='src_path1_bigimage' />

jQuery 代码是：

$(document).ready(function(){
    $("img.item").click(function(){
        $("#imageItemHolder").attr("src",$(this).attr("title"));
        $("#imageDivisionHolder").show();
    });
});

或者您可以编写一个执行此操作的函数并设置图像的 onclick 以运行它。不推荐这种方式。

【讨论】：

Ata 你会检查我的错误点吗？我已经修改了代码，但我仍然有问题任何解决方案？
您好 venkatachalam，我再次阅读了您的回答，但我不明白您的问题是什么。可以为我解释一下你的答案吗？
是Ata，ajax.php有如下功能 1.echo " 2.echo " 是的，通过添加隐藏它，同时单击相应图像需要显示的超链接，而不是我曾经单击图像以按照您的建议显示该图像