更改图像 src 值后的 javascript 缩放默认图像答案

【问题标题】：javascript zoom default image after change image src value更改图像 src 值后的 javascript 缩放默认图像
【发布时间】：2023-04-08 04:51:01
【问题描述】：

我的 javascript 有问题。首先，如果我单击图像，它将缩放图像。问题是当图像更改为不同的图像并单击时，它仍会缩放第一张图像，而不是新图像。

我的 html（显示图像和缩放的容器）

<div class="col-md-8">
     <span  id='ex3' class="zoom">
       <img class="img-responsive" id="myImage" width='750' height='550' src="<?php echo "./image/product/p1/". $row['item_image']. ".jpg"; ?>">
     </span>
</div>

我的 html（下一张我想点击和缩放的图片）

<div class="col-sm-3 col-xs-6">
   <a href="#">
      <img class="img-responsive portfolio-item subimage"  onclick="changeImage1(); <?php $show1="./image/product/p1/". $row['item_image']. ".jpg"; ?>" src="<?php echo "./image/product/p1/". $row['item_image']. ".jpg"; ?>" alt="">
   </a>
</div>

我在正文标签中的 Javascript

function changeImage1() {
    var image = document.getElementById('myImage');
    var submage = document.getElementsByClassName('subimage')[1].src; 
    image.src= submage;        
}

我在 head 标签中的 javascript（缩放功能）

 jQuery(document).ready(function($){
     $('#ex3').zoom({ on:'click' });         
 });

如何解决它，有什么想法吗？谢谢。

【问题讨论】：

这可能是zoom() 插件的缓存问题。检查该插件的文档以获取刷新内容的任何方法。如果没有，您可能必须销毁它并重新实例化。
如何销毁并重新实例化？
同样，这完全取决于插件。检查文档。

标签： javascript jquery html css image

【解决方案1】：

您在下一张图片中缺少 id="ex3" 单击缩放 html。试试这样的：

jQuery(document).ready(function($){
        $('img').zoom({ on:'click' });         
    });

【讨论】：

不起作用，将#ex3 更改为 img 后无法再缩放
@Shawn 这个怎么样？ $('img').parent().zoom({ on:'click' });
仍然像我目前的问题。没变化。只是可以缩放默认图像。
有点奇怪，在容器中只缩放默认图片，第二张图片在容器中不缩放。
您可以查看您使用的任何插件的文档。它应该在那里说明如何将它用于多个图像。