当用户点击一个链接时加载新图片

我想弄清楚如何在单击链接时加载带有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>

我想＃媒体照片DIV图像更改，恕不页面被重新加载。

这是我到目前为止有：

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

不知道我在做什么是可能的，也许我需要阿贾克斯？

来源

2009-09-01 Richard Knop

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

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

来源

2009-09-01 23:05:12

我试过，当我点击链接，我被带到浏览器中的图像URL。 – 2009-09-01 23:08:04

您还需要移除图片上的锚定标记或将href更改为像href =“＃”或href =“javascript：void（0）”之类的内容，以便它实际上不会链接到资源本身。然后你的JavaScript在这里应该工作。 – jkelley 2009-09-01 23:11:03

@Richard Knop：我认为你的编辑速度太快了。 – 2009-09-01 23:11:09

的html方法将它呼吁元素的HTML内容。

您的代码将新的IMG元素放入旧的元素中，这是没有意义的。

您需要使用attr方法来设置现有图像的src属性，像这样：

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

此外，您还需要添加return false;到结束（或者叫event.preventDefault()并采取事件参数）以防止浏览器跟随链接。

来源

2009-09-01 23:10:04 SLaks

当用户点击一个链接时加载新图片

回答

相关问题