Question

我正在尝试弄清楚如何在点击链接时使用ajax加载新图像。

链接看起来像这样（页面上有几个这样的链接，它们内部的图像缩略图很少，因此用户可以在他/她点击链接时大致了解将加载的图像）：

<div class="box-content2">
    <a href="/path/to/image/2.jpg" id="2">
        <img src="/path/to/image/thumbnail/2.jpg" title="Image Title 2" />
    </a>
    <a href="/path/to/image/3.jpg" id="3">
        <img src="/path/to/image/thumbnail/3.jpg" title="Image Title 3" />
    </a>
</div>

Href属性包含图像的相对路径，id是图像名称（如果它是相关的，它也是数据库中的id）。

在同一页面上，我有这个标记：

<div id="media-photo">
    <img src="/path/to/image/1.jpg" alt="Image Title 1" />       
</div>

我希望＃media-photo div中的图像能够在不重新加载页面的情况下进行更改。

这是我到目前为止所做的：

$(document).ready(function() {
    $('.box-content2 a').click(function() {
        var path = $(this).attr('href');
        $('#media-photo img').html('<img src="' + path + '" />');
    });
});

不确定我正在做什么是可能的，也许我需要ajax？

Answer 1

你肯定是在正确的轨道上：

$(document).ready(function() {
    $('.box-content2 a').click(function() {
        var path = $(this).attr('href');
        $('#media-photo img').attr('src', path)
                             .attr('alt', $('img', this).attr('title')); // in anticipation of your need
        return false; // stop the default behavior (following the link)
    });
});

Answer 2

html方法设置调用它的元素的html内容。

您的代码将旧的IMG元素放入旧的IMG元素中，这是毫无意义的。

您需要使用attr方法设置现有图片的src属性，如下所示：

$('#media-photo img').attr('src', path);

此外，您需要将return false;添加到最后（或调用event.preventDefault()并使用事件参数）以防止浏览器关注该链接。

用户单击链接时加载新图像

2 个答案: