JavaScript數組不用於循環變量

Question

我有一個數組填充了與我創建的Google Maps多邊形對象具有相同名稱的字符串。我想遍歷數組來設置一個特定的選項。下面的代碼：

for (var i = 0; i < statesPoly.length; i++) { 
    google.maps.event.addListener(statesPoly[i], 'mouseover', function() { 
     statesPoly[i].setOptions({ strokeWeight: '2' }); 
    }); 
} 

執行時，我得到「無法調用‘setOptions’未定義」的劇本好像是用statesPoly [I]字面上。當我用例如statesPoly [11]替換statesPoly [i]時，腳本按預期工作。

環路也按預期工作，當我嘗試這樣的事：

for (var i = 0; i < statesPoly.length; i++) { 
    alert(statesPoly[i].strokeColor); 
} 

我在做什麼錯？

更新：

靠近這裏。我相信在某些情況下使用this的原因是因爲我的函數期待一個對象，我給它一個字符串。情況會是這樣嗎？

alert(statesPoly[0]); 
     google.maps.event.addListener(sarawakPoly, 'mouseover', function() { 
      $("#"+statesPoly[0]).addClass("highlight"); 
      sarawakPoly.setOptions({ strokeWeight: '2' }); 
      //infowindow.open(map,marker); 
     }); 

上面的代碼將與SarawakPoly提醒，以及使用statesPoly [0]作爲ID作品的字符串按預期方式。這

alert(statesPoly[0]); 
     google.maps.event.addListener(statesPoly[0], 'mouseover', function() { 
      $("#"+statesPoly[0]).addClass("highlight"); 
      statesPoly[0].setOptions({ strokeWeight: '2' }); 
      //infowindow.open(map,marker); 
     }); 

不起作用，因爲「遺漏的類型錯誤：無法讀取屬性‘鼠標懸停’的未定義」

如果我是正確的，如何讓我的JS投我的數組變量作爲一個對象？

Answer 1

這是JavaScript代碼非常常見的錯誤：

for (var i = 0; i < n; i++) { 
    registerSomeCallback(function() { 
     console.log(i); 
    }); 
} 

在每次循環迭代的變量i遞增，並且becasue JavaScript的lexical scoping的功能在每次迭代共享相同i變量定義。這意味着當回調被調用時（在你的情況下，當發生Google Maps事件時），i將永遠是循環所到達的最後一個值。

這是因爲如果你這樣做：

var i, fn; 

i = 0; 
fn = function() { alert(i); }; 
fn(); // will alert "0" 
i = 1; 
fn(); // i has changed, will now alert "1" 
i = 2; 
fn(); // i has changed again, will now alert "2" 

你需要確保有對你的每個循環迭代一個新的變量範圍，例如：

for (var i = 0; i < n; i++) { 
    (function (n) { 
     registerSomeCallback(function() { 
      console.log(n); 
     }); 
    }(i)); 
} 

在這個版本的代碼中，每個回調函數都在自己的變量作用域中用自己的計數器變量定義（您仍然可以調用i，但我稱n使示例更清晰）。

Answer 2

你可以試試用this代替嗎？

for (var i = 0; i < statesPoly.length; i++) { 
     (function(i) { 
     google.maps.event.addListener(statesPoly[i], 'mouseover', function() { 
      this.setOptions({ strokeWeight: '2' }); 
     }); 
     })(i); 
    } 

Answer 3

statesPoly [i]是未定義的，因爲您的變量i未在您附加到事件偵聽器的新函數中定義。

你可以在這裏做幾件事情，但最簡單的方法是將這個變量傳遞給函數。類似的東西：

google.maps.event.addListener(statesPoly[i], 'mouseover', function(i) { 
    statesPoly[i].setOptions({ strokeWeight: '2' }); 
});