使用wheelzoom在.js中調用按鈕的腳本組

Question

我有12個按鈕，每個都帶有一個ID，我正在使用此腳本進行操作。

$(document).ready(function() { 
    $("#WEyear18000").click(function() { 
    $("#WEtextarea").load("Files/Docs/y18000.txt"); 
    $('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >'); 
    $('#WEee244f5837 .PullZone').click(); 
    wheelzoom(document.querySelectorAll('img')); 
    }); 
}); 

WEyear18000，是按鈕，WEtextarea的ID，是顯示上按一下按鈕，WEimage_view TXT的div的ID，就是在同一個按鈕點擊，WEee24f5837新的圖像顯示的div的ID，是關閉按鈕所在的可摺疊面板的ID。

在.js文件中有12個腳本語句。

這一切都有效，但在第二個或另一個按鈕被點擊後，它會導致一些奇怪的效果，頁面上的所有圖像消失，但點擊按鈕上的圖像。頁面在這裏，page with issue

任何關於如何流線行腳本的建議想。我是一個新手腳本，但設法大雜燴這工作，但對其餘的頁面圖像有負面影響。建議和樣品jsfiddle。提前致謝。

<div id="wrapper"> 
    <div id="WEtextarea"> </div> 
    <div id="WEimage_view"></div> 
</div> 

CSS控制div的大小和所有方面。

Answer 1

我嘗試了所有的菜單項......並沒有注意到這樣的錯誤。

所以，雖然你在這裏...我有一個建議，以減少你的長塊由一個小塊重複12次。

我會定義映射爲對象，像這樣：

var maps = [ 
    { 
    buttonId: "WEyear18000", 
    text: "Files/Docs/y18000.txt", 
    image: "Files/Image/treesimages/PalaeoGlaciolMaps.jpg" 
    }, 
    { 
    // other 11 objects using the same structure... 
    } 
]; 

我只想補充一類每個項目，在HTML中，像這樣：

<div id="WEyear18000" class="BaseDiv RBoth OEWELinkButton OESK_WELinkButton_Default OECenterAH clickHandlerClass" style="z-index:1"> 

然後，我會使用像這樣的更短的功能：

$(document).ready(function() { 

    $(".clickHandlerClass").click(function(){ 

    // Get the id of the clicked menu item 
    var thisId = $(this).attr("id"); 

    // Find its related object 
    var mapIndex = -1; 
    for(i=0;i<maps.length;i++){ 
     if(maps[i].buttonId == thisId){ 
     mapIndex = i; 
     } 
    } 

    if(mapIndex != -1){ 
     // Use the object infos in the page elements. 
     $("#WEtextarea").load(maps[mapIndex].text); 
     $('#WEimage_view').html('<img src="'+maps[mapIndex].image+'" >'); 
     $('#WEee244f5837 .PullZone').click(); 
     wheelzoom(document.querySelectorAll('img')); 
    }else{ 
     console.log("Undefined map or id error..."); 
    } 

    }); 
}); 

對象數組方式更容易維護...並且附加按鈕更容易添加。
您可以使用「clickHandlerClass」以外的其他班級名稱。
;）

Answer 2

修復你的錯誤，你需要更換：

wheelzoom(document.querySelectorAll('img')); 

有：

wheelzoom(document.querySelectorAll('#WEimage_view img')) 

所以只能在#WEimage_view圖像將通過wheelzoom

Answer 3

影響wheelzoom看起來像是我唯一可能的錯誤來源。所以我尋找它的source，發現：

Wheelzoom用它的src替換img的背景圖像。然後將src設置爲透明圖像。

所以，第一wheelzoom，你src transeparent，並在第二，你會得到一個透明background-image爲好。

您可以通過調用wheelzoom只在您的新的圖像解決這個問題：

$(document).ready(function() { 
    $("#WEyear18000").click(function() { 
    $("#WEtextarea").load("Files/Docs/y18000.txt"); 
    $('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >'); 
    $('#WEee244f5837 .PullZone').click(); 
    //wheelzoom(document.querySelectorAll('img')); 
    wheelzoom(document.querySelectorAll('#WEimage_view img')); 
});