jQuery將單個圖像的src複製到另一個圖像上

Question

我該怎麼做才能做到這一點。我希望如果我點擊imgThumb1圖片，此圖片的src被複制到mainIMG上，但圖片在我點擊時不會改變...我該怎麼辦？

$(document).ready(function(){ 
    $('.propertyResultImageThumb img[alt="imgThumb1"]').click(function(){ 
     var trial = $('img[alt="imgThumb1"]').attr('src'); 
     $("#mainIMG").attr("src", trial); 
    }); 
}); 


<img alt="mainIMG" src="" id="mainIMG"/> 
<img alt="imgThumb1" src="http://..../uploads/2012/09/Villa-Located-In-Almansa.jpg" /> 

Answer 1

$(document).ready(function(){ 
    $('img[alt="imgThumb1"]').click(function(){ 
     var trial = $('img[alt="imgThumb1"]').attr('src'); 
     $('img[alt="mainIMG"]').attr("src", trial); 
    }); 
}); 

DEMO

---

我的代碼

$(function(){ 
    $('#first').click(function(){ 
     $("#second").attr("src", $(this).attr('src')); 
    }); 
}); 

<img src="" id="first"/> 
<img src="" id="second" /> 

Answer 2

嘗試包裝你的HTML的容器，這將有類propertyResultImageThumb

<div class="propertyResultImageThumb "> 
<img alt="mainIMG" src="" id="mainIMG"/> 
<img alt="imgThumb1" src="http://..../uploads/2012/09/Villa-Located-In-Almansa.jpg" /> 
</div>  

，之後做這樣的

$(document).ready(function(){ 
    $('.propertyResultImageThumb img[alt="imgThumb1"]').click(function(){ 
     var trial = $(this).attr('src'); 
     $("#mainIMG").attr("src", trial); 
    }); 
}); 

Answer 3

您需要與類名「propertyResultImageThumb」父DOM元素 檢查的jsfiddle

http://jsfiddle.net/erwKP/1/

Answer 4

如果你想複製的圖像，而它是從服務器再次下載（在驗證碼的情況下，它可以改變），那麼應使用此代碼：

$(function(){ 
    $('#first').click(function(){ 
     img_copy(document.getElementById('#first'),document.getElementById('#second')); 
    }); 
}); 

//copy src to destination without destination to download the image 
function img_copy(src,destination) 
{ 
    var canvas = document.createElement('canvas'); 
    var context = canvas.getContext('2d'); 
    context.drawImage(src, src.width, src.height); 
    var dataURL = canvas.toDataURL(); 
    destination.src = dataURL; 
} 



<img src="" id="first"/> 
<img src="" id="second" />