jquery如何在div中加載照片？

我有一些照片：jquery如何在div中加載照片？

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

任何想法幫助:)

感謝

來源

2011-04-18 Patrioticcow

創建事件處理程序，創建一個img的克隆，清空你的容器並添加克隆的img。

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

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

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

});

享受:)

編輯：刪除.clone（）來移動它，而不是複製它。

來源

2011-04-18 20:26:12

乾淨的解決方案。但是我認爲你可以改進一點：'$（'div.test'）。empty（）。append（img）;'=>'$（'div.test'）。html（img）;' – fl00r 2011-04-18 20:31:55

Touche ！我試圖平衡冗長與簡約。 – 2011-04-18 20:34:33

@ fl00r - 有趣的是，我今天才知道，你可以使用.html（）和一個jQuery對象。我做了一些研究，我不同意你的原因有兩個：1）沒有記錄，.html（）甚至接受除函數或字符串之外的任何內容。 2）jQuery在後臺最終調用'$（this）.empty（）。append（val）'在一個全部的最後一個溝槽'else'中，以便執行相同的代碼。但是，它只能在一堆其他測試和其他垃圾之後才能做到。因此，性能較差。 – 2011-04-18 20:35:52

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

來源

2011-04-18 20:26:03

這將幫助：

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

來源

2011-04-18 20:27:40

DEMO：http://jsfiddle.net/2VstH/

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

來源

2011-04-18 20:30:16 fl00r

我笑了一下演示！ – kjy112 2012-12-04 17:20:34

jquery如何在div中加載照片？

回答

相關問題