我所有的代码都被最后一部分覆盖

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);