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

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元素放入旧元素中，这毫无意义。

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

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

另外，您需要添加return false; 结束（或调用event.preventDefault()并采用一个事件参数）以防止浏览器跟踪该链接。