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

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