上顯示點擊圖像在一個小格

Question

HTML在一個大的div圖像：

<div class="blowup"> 
<img src="images/products/3.jpg" alt="even Men Black Slim Fit Nehru Jacket"> 
</div> 

<div class="thumbs-container"> 
<img src="images/products/1.jpg"> 
<img src="images/products/2.jpg"> 
</div> 

我有兩個div秒。 .blowup是較大的，而.thumbs-container則較小。

我需要的是在點擊小圖像時將.thumbs-container中的圖像顯示在.blowup中。我怎樣才能使用JQuery來做到這一點？

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.thumbs-container img').click(function(){ 

我應該在這裏添加什麼？

 }); 
    }); 
</script> 

Answer 1

你可以得到的點擊img的src並將其分配到blowup img

jQuery(function ($) { 
    var $blowup = $('.blowup img'); 
    $('.thumbs-container img').click(function() { 
     $blowup.attr('src', this.src); 
    }); 
}); 

演示：Fiddle

Answer 2

$('.blowup img').attr('src',$(this).attr('src')) 

Answer 3

試試這個代碼： The JSFiddle is here

HTML：

<div class='blowup'> 
    <img src="img3.png" alt="img3"/> 
</div> 

<div class="thumbs-container"> 
     <img src="img1.png" alt="img1"/> 
     <img src="img2.png" alt="img2"/> 
</div> 

JQuery的：

$(document).ready(function(){ 
    $('.thumbs-container img').click(function(){ 
     $('.blowup img').attr('src',$(this).attr('src')); 
    }); 
}); 

我認爲這將是對你有幫助... !!