javascript - 单击时替换图像 SRC

Question

我有一个 WooCommerce 设置，其中有一个画廊。一张是大图，其他是缩略图。

我想要做的是，当有人单击缩略图时，它会替换大图像，并且大图像出现在缩略图处。我怎么做？有 JavaScript 专家来帮忙吗？

这是完整的 HTML 输出。

<div class="images product-gallery ">
            <div class="big_image">
                <a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a>
            </div>

                <div class="thumbnails">
                    <a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a>
                    <a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a>
                    <a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a>
                    <a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a>
                </div>

            <div class="clear"></div>
</div>

我不需要那个<a href="图像上的部分。所以，你可以忽略它们。
我对 JavaScript 的了解很少，所以请帮助我。我想要的只是当有人单击任何缩略图时，缩略图会替换大图像，而大图像会替换单击的缩略图。所以基本上改变了立场。

请原谅我糟糕的英语。

Answer 1

Jquery

您可以在 onclick 事件中使用 src attr()

 $("#target").attr("src","newUrlOfTheImg");

或者使用普通的java脚本

document.getElementById("target").src="newUrlOfTheImg";

And have look once