在CLick上替换图像SRC

Replace Image SRC On CLick

本文关键字：图像 SRC 替换 CLick      更新时间：2023-09-26

我有一个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知之甚少，所以请帮帮我。我只想当有人点击任何缩略图时，缩略图会取代大图像，大图像会取代点击的缩略图。所以基本上是改变位置。

请原谅我英语不好。

Jquery

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

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

或者使用java脚本

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

并查看一次

document.getElementById("target").src="myNewImage.extension";

可以在onclick事件中使用的纯javascript替代方案。

$(document).ready(function() {
 $('.zoom').on('click', function() {
  $('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
 });
});

你应该尝试一下，但是最好有单独的缩略图和大图像文件来加载。

相关文章：