Jquery如何在div中加载照片？答案

【问题标题】：Jquery how to load photo inside div?Jquery如何在div中加载照片？
【发布时间】：2011-04-18 20:23:51
【问题描述】：

我有一些照片：

<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 + '>");
});

任何想法都有帮助:)

谢谢

【问题讨论】：

标签： jquery load get photo

【解决方案1】：

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

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

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

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

});

享受:)

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

【讨论】：

清洁解决方案。但我认为你可以稍微改进一下：$('div.test').empty().append(img); => $('div.test').html(img);
触摸！我试图在冗长与极简主义之间取得平衡。
@fl00r - 有趣的是，我今天刚刚了解到您可以将 .html() 与 jQuery 对象一起使用。我做了一些研究，但出于两个原因，我不同意您的观点：1) .html() 甚至接受除函数或字符串之外的任何内容都没有记录。 2) jQuery 在幕后最终调用$(this).empty().append(val)，最后调用else，因此执行相同的代码。然而，它只有在一堆其他测试和其他垃圾之后才会这样做。因此，它的性能较低。

【解决方案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;
})

【讨论】：

【解决方案3】：

这会有所帮助：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：