微軟邊緣區塊範圍問題

Question

下面的代碼工作完全正常的Chrome和Firefox，但不是在邊緣：

HTML：

<ul> 
    <li class="listItems">one</li> 
    <li class="listItems">two</li> 
    <li class="listItems">three</li> 
</ul> 

的Javascript：

var listItems = document.querySelectorAll('.listItems'); 
for (let i = 0; i < listItems.length; i++) { 
    let element = listItems[i]; 
    element.addEventListener('click', function() { 
     alert('Clicked on number: ' + i) 
    }); 
} 

當你點擊在Chrome/Firefox中分別獲得0,1,2的列表項是正確的。在Edge中，您始終獲得相同的數字（超過for循環），這表示程序段作用域不起作用。任何想法Edge有什麼問題或如何解決這個問題？

您也可以在各自的瀏覽器中測試jsFiddle。

Answer 1

你可以使用閉包。這將保持函數內部的值。

var listItems = document.querySelectorAll('.listItems'); 
 
for (let i = 0; i < listItems.length; i++) { 
 
    let element = listItems[i]; 
 
    element.addEventListener('click', (v =>() => alert('Clicked on number: ' + v))(i));  
 
}

<ul> 
 
    <li class="listItems">one</li> 
 
    <li class="listItems">two</li> 
 
    <li class="listItems">three</li> 
 
    <li class="listItems">four</li> 
 
    <li class="listItems">five</li> 
 
</ul>

Answer 2

我沒有在這裏安裝與測試優勢，但同樣的事情發生在IE11。似乎它不會將for()中聲明的變量視爲塊的一部分。

可以 「修復」 它（或解決它）是這樣的：

var listItems = document.querySelectorAll('.listItems'); 
 
    for (let i = 0; i < listItems.length; i++) { 
 
     let element = listItems[i]; 
 
     let j = i; // <------ new variable 
 
     element.addEventListener('click', function() { 
 
      alert('Clicked on number: ' + j) 
 
     }); 
 
    }

<ul> 
 
    <li class="listItems">one</li> 
 
    <li class="listItems">two</li> 
 
    <li class="listItems">three</li> 
 
</ul>

也就是說，引入let變量，實際{}塊內。 IE11對此非常滿意，所以我希望Edge也是如此。 （這樣可以節省你不得不在循環中額外關閉的老派方法。）