缩略图图像切换

Question

我有一个div clalled product_main_img，它是完整的独立图像。然后，当点击切换时，我在切换器下面有四个缩略图图像，主图像成为完整显示的图像。

我需要完成的是将独立图像（页面加载中的第一个）更改为正在单击的图像，然后将独立图像移动到缩略图部分。

我让缩略图移动到主div区域，但是独立图像正在消失。

    div class="product_visuals">
        <div class="product_main_img">
            <div class="main_img_switch"><img src="/images/main_img.jpg"></div> 
        </div>
        <div class="product_selection">
            <div class="product_details">
                <img src="/images/img_01.jpg">
            </div>
            <div class="product_details">
                <img src="/images/img_02.jpg">
            </div>
            <div class="product_details">
                <img src="/images/img_03.jpg">
            </div>
            <div class="product_details">
                <img src="/images/img_04.jpg">
            </div>
        </div

脚本：

    $('.product_details img').click(function() {
        $('.main_img_switch img').attr("src", $(this).attr("src"));
    });

Answer 1

在变量中保存独立图像的引用，如下所示：

$('.product_details img').click(function() {
    var mainImg = $('.main_img_switch img');
    var tempSrc = mainImg.attr("src");
    mainImg.attr("src", this.src));
    this.src = tempSrc;
});