jquery - 单击小 div 中的图像时在大 div 中显示图像

Question

HTML:

<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