我所有的代碼都被最後一部分覆蓋

Question

我們有一張使用多邊形在國家之上創建覆蓋圖的地圖。當用戶懸停在一個國家時，多邊形會改變顏色。

當鼠標離開它變回該國（或至少我們希望它）

我們下面會發生什麼情況的代碼是，這兩個國家的訪問設置JUST代碼的最後一節。似乎所有其他代碼被覆蓋。

我不知道哪個變量是唯一的。

for(var i = 0; i < germany.length; i++){ 
    addListener(germany[ i ], germany); 
    } 
function addListener(germany_item, tweened) 
{ 
    google.maps.event.addListener(germany_item, "mouseover",function() { 
        for(var i in tweened) 
     tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" }); 
    }); 
    google.maps.event.addListener(germany_item, "mouseout",function() { 
        for(var i in tweened) 
     tweened[ i ].setOptions({ fillColor: "#5EA9BD", strokeColor: "#5EA9BD" }); 
    }); 
}// 
for(var i = 0; i < france.length; i++){ 
    addListener(france[ i ], france); 
    } 
function addListener(france_item, tweened) 
{ 
    google.maps.event.addListener(france_item, "mouseover",function() { 
        for(var i in tweened) 
     tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" }); 
     }); 
    google.maps.event.addListener(france_item, "mouseout",function() {  
        for(var i in tweened) 
      tweened[ i ].setOptions({ fillColor: "#006886", strokeColor: "#006886" }); 
     }); 

Answer 1

你不能有相同的名稱（你有function addListener()一分式兩份）兩種功能。如果你這樣做，那麼只有最後一個會活躍（這是你正在經歷的）。我建議你或者將兩個函數的名字改爲addListenerGermany()和addListenerFrance()，或者用一個函數替換它們，並將兩者之間的細微差別作爲參數傳遞，這樣你就可以用一塊代碼來提供這兩種需求。

例如，您可以將其全部改成這樣：

for (var i = 0; i < germany.length; i++) { 
    addListenerCommon(germany[ i ], germany , "#5EA9BD", "#5EA9BD"); 
} 

for(var i = 0; i < france.length; i++) { 
    addListenerCommon(france[ i ], france, "#006886", "#006886"); 
} 

function addListenerCommon(item, tweened, fill, stroke) { 
    google.maps.event.addListener(item, "mouseover",function() { 
     for(var i in tweened) { 
      tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" }); 
     } 
    }); 
    google.maps.event.addListener(item, "mouseout",function() { 
     for(var i in tweened) { 
      tweened[ i ].setOptions({ fillColor: fill, strokeColor: stroke }); 
     } 
    }); 
} 

如果你要添加更多的國家，那麼你可以做一個函數的for循環：

function initCountry(country, fill, stroke) { 
    for (var i = 0; i < country.length; i++) { 
     addListenerCommon(country[i], country, fill, stroke); 
    } 
} 

initCountry(germany, "#5EA9BD", "#5EA9BD"); 
initCountry(france, "#006886", "#006886"); 
initCountry(australia, "#FF6886", "#FF6886"); 

依此類推......

Answer 2

請參閱this related question。使用function myFunction()語法在解析時定義了一個函數，而不是在運行時，所以最後一個聲明將覆蓋第一個。您可以使用var myFunction = function()語法修復此問題，該語法在運行時定義：

var addListener = function(germany_item, tweened) { ... }; 
addListener(germany); 
var addListener = function(france_item, tweened) { ... }; 
addListener(france);