Javascript 与image Vewer一起使用时，放大镜会出现故障

以下是我将要提到的网站的链接：

所以我有一个简单的javascript图像查看器，它由一个主图像大图像和一组缩略图组成。单击缩略图时，主图像将更改为显示缩略图，如下所示：

$largeimage.attr'src'，'images/interiorcontents3/4.JPG'

我还使用一个脚本在用户单击图像时创建一个放大镜，问题是如果在第一个图像上使用放大效果，然后单击缩略图查看不同大小的图像，并在该图像上使用放大镜，则会出现两个放大镜，每个图像一个

下面是放大镜和缩略图的java：

$("#imgbutton1").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/1.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/1.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });

});

$("#imgbutton2").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/2.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/2.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

$("#imgbutton3").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/3.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/3.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

$("#imgbutton4").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/4.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/4.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

我已经将放大镜脚本放在每个缩略图的函数中，以便每次都执行，否则每次尝试使用放大镜时，它只显示页面首次加载时的主图像-解决了该问题并创建了此新图像

要查看故障，请转到此链接

单击第二个缩略图，然后单击大图像以使用放大效果。然后单击第一个缩略图并对其使用放大效果-当您移动鼠标时，您将看到它同时显示两个图像的图像放大镜

---

有什么建议吗？？提前谢谢

Zoomy插件似乎缺少销毁功能。每次单击都会添加更多zoomy元素的实例

---

尝试添加$'.zoom'.find'.zoomy'.remove；转到zoomStop回调。或者，用隐藏代替移除就足够了。

尝试过之后，它一开始可以工作，但你只能对每个图像使用一次放大镜，然后它就会完全消失。我在使用网站时查看了脚本，似乎创建的缩放元素称为zoom-Obj-0-每次单击其中一个缩略图时，都会创建一个新的缩放元素，zoom-Obj-1、zoom-Obj-2、zoom-Obj-3等。如果有某种方法，脚本可以识别最高的缩放对象编号，并删除所有可以工作的较低的缩放对象…啊！我得到了它，使用了您建议的同一行代码，但是我没有将它放在zoomStop回调中，而是将它放在所有缩略图的单击函数的开头。这样，每次更改图像时，.zoomy对象都会在创建新对象之前被删除。谢谢：