Javascript數組不使用for循環變量

Question

我有一個數組填充了與我創建的Google Maps Polygon Objects同名的字符串。 我想迭代數組來設置一個特定的選項。 這是代碼：

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

不起作用，因為“Uncaught TypeError：無法讀取未定義的屬性'mouseover'”

如果我是對的，如何讓我的JS將我的數組變量轉換為對象？

Answer 1

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

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

在每次循環迭代中，變量i遞增，並且由於JavaScript的詞法范圍 ，每次迭代上定義的函數共享相同的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' });
});