Javascript放大/缩小叠加在第二次加载图像时不起作用

Question

我有一些javascript，它调用一个覆盖来显示图像的完整预览，一个按钮用于放大/缩小，一个按钮用于返回。

问题是，当我第一次查看完整的图像时，放大/缩小切换可以正常工作，但当我返回到缩略图并启动另一个图像时，放大/缩小不起作用。

DOM树结构如下所示：

overlay(**parent**) >> imgContainer >> imgCanvas(draggable) >> img

也许一些代码会对我的情况有所帮助。有人能告诉我我可能做错了什么吗？

//enables the zoom-in/zoom-out toggle function
        $('#Zoom').toggle(function() {
                img.removeAttribute("height");
                $("#draggable").draggable();                
                iconZ.setAttribute("src", "nav/nav-zoom-out.gif");
            },              
            function() {
                img.setAttribute("height", "270px");
                $("#draggable").draggable('destroy');
                $("#draggable").animate(
                { "left": $("#draggable").data("Left"), "top": $("#draggable").data("Top")}, "slow");
                iconZ.setAttribute("src", "nav/nav-zoom.gif");
                });

        //navigates back to the thumbnails
        home.addEventListener('click', function() {


            $('imgCanvas').remove();
            imgContainer.removeChild(imgCanvas);
            overlay.removeChild(imgContainer);

            $('#overlay').removeClass("on");
            }
            , false);

Answer 1

您正在破坏看起来像是要放入图像的页面的各个部分。我想你的意思是把它们藏起来。