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

您正在破壞放置圖像的頁面部分的外觀。我認為您的意思是僅隱藏它們。