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

Question

我們有一張地圖，該地圖使用多邊形在國家/地區上方創建疊加層。 當用戶將鼠標懸停在一個國家上時，多邊形會更改顏色。

當鼠標離開該國家時，它變回原來的狀態（或者至少我們希望它變回該狀態）

我們下面看到的代碼是，兩個國家都訪問了代碼的最后一部分的設置。 似乎所有其他代碼都被覆蓋。

我不知道哪個變量要唯一。

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() （您具有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

請參閱此相關問題 。 使用function myFunction()語法在解析時（而不是在運行時function myFunction()定義一個函數，因此最后一個聲明將覆蓋第一個聲明。 您可以使用var myFunction = function()語法var myFunction = function()在運行時定義var myFunction = function()來解決此問題：

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