Jquery如何在div中加载照片？

Question

我有一些照片：

<div class="photo">
 <a rel="example_group" href="http://download.com/79.jpg"><img class="edit_multimedia_img" src="http://download.com/79.jpg"></a>
 <a rel="example_group" href="http://download.com/80.jpg"><img class="edit_multimedia_img" src="http://download.com/80.jpg"></a>
 <a rel="example_group" href="http://download.com/81.jpg"><img class="edit_multimedia_img" src="http://download.com/81.jpg"></a>
 <a rel="example_group" href="http://download.com/82.jpg"><img class="edit_multimedia_img" src="http://download.com/82.jpg"></a>
 </div>

并且我有一个 div：

<div class="test"><div>

我想要完成的是，当我单击任何链接时，照片将加载到 .test div 中，

可能是这样的？

$("a").click(function() {
  $(".test").html("<img src=' + this.href + '>");
});

任何想法都有帮助:)

谢谢

Answer 1

创建事件处理程序，创建 img 的克隆，清空容器并添加克隆的 img。

$('div.photo').delegate('a', 'click', function(e) {
  e.preventDefault();

  var img = $('img', this).clone();

  $('div.test').empty().append(img);

});

享受吧:)

编辑：删除 .clone() 以移动它而不是复制它。

Answer 2

$('div.photo').find('a').click(function() {
    $(this).find('img').appendTo('div.test');
    return false;
});

目前还不清楚您是否希望它成为测试 div 中的唯一项目。如果是这样，只需这样做：

$('div.photo').find('a').click(function() {
    var $test = $('div.test').empty();
    $(this).find('img').appendTo($test);
    return false;
})

Answer 3

这将有助于：

$("a").click(function(e) {
    e.preventDefault();
  $(".test").html($(this).html());
});

Answer 4

演示：http://jsfiddle.net/2VstH/

$(function(){
    $("#photos a").click(function(){
        image = $("<img />").attr("src", $(this).attr("href"))
        $("#test").html(image);
        return false;
    })
})