動態改變圖像源 - jQuery的

Question

我得到了下面的代碼：

HTML

<div class="image"> 
    <img src="http://ecx.images-amazon.com/images/I/41ghiuvjdvL._SL75_SS50_.jpg" /> 
</div> 

<br /> 

<div class="photo"> 
    <img src="http://profile.ak.fbcdn.net/hprofile-ak-ash2/27520_119569768054263_2432_q.jpg" /> 
</div>​ 

JS

// getting src of bottom image 
var bottomSrc = $(".photo img").find("src"); 

// getting src of top image 
var topSrc = $(".image img").find("src"); 

$(".photo").click(function() { 
    // changing sources 
    // topSrc.attr("src", bottomSrc); 
    // topSrc.replaceWith(bottomSrc); 
    topSrc.replace(bottomSrc); 
})​ 

Fiddle

當底部圖像被點擊，我想頂部圖像的src被替換成底部圖像的src，這樣兩個圖像都是相同的。

爲什麼提供的代碼不起作用？

Answer 1

嘗試了這一點：

$(".photo").click(function() { 
    var src=$(this).children("img").attr("src"); 
    $(".image img").attr("src",src); 
})​; 

Answer 2

Try this