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较小。

我需要的是在点击小图片时将<script type="text/javascript"> $(document).ready(function(){ $('.thumbs-container img').click(function(){中的图片显示到}); }); </script>。我怎么能用JQuery做到这一点？

{{1}}

我应该在这里添加什么？

{{1}}

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

试试此代码： 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'));
    });
});

我认为这会对你有所帮助...... !!

Answer 3

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

单击小div中的图像，以大div显示图像

3 个答案: