Javascript中for循环的作用域问题

我意识到这可能被归类为复制品，但我已经详细阅读了，但仍然无法理解

我有这段代码，但在“focus”函数中，“I”总是2，（pageSearchInput.length值），我希望每个循环上的值分别为0,1

我理解这是一个范围问题，但如果不简单地使用“let”，我无法解决如何解决这个问题

如果有人能解释这是怎么回事，我将非常感激

for (i = 0; i < pageSearchInput.length; i++) {

    pageSearchInput[i].addEventListener("focus", function(){

        pageSearchContainer[i].style.outline = "4px solid #ffcc33";
        pageSearchButton[i].style.backgroundColor = "#008920";
        pageSearchButton[i].style.border = "1px solid #008920";

    });

}

for（i=0；i

您必须使用

let

关键字，以便在for

循环中保留
i
的值

for (let i = 0; i < pageSearchInput.length; i++) {

只需将
i
作为参数传递给函数，然后返回处理事件的函数：

for (i = 0; i < pageSearchInput.length; i++) {

    pageSearchInput[i].addEventListener("focus", (function(i){
      return function() {
        pageSearchContainer[i].style.outline = "4px solid #ffcc33";
        pageSearchButton[i].style.backgroundColor = "#008920";
        pageSearchButton[i].style.border = "1px solid #008920";
      };
    })(i));

}

for（i=0；i
如果不想使用
让
创建包装函数

for (i = 0; i < pageSearchInput.length; i++) {


    pageSearchInput[i].addEventListener("focus", function(){
        return (function(i) {
            pageSearchContainer[i].style.outline = "4px solid #ffcc33";
            pageSearchButton[i].style.backgroundColor = "#008920";
            pageSearchButton[i].style.border = "1px solid #008920";
        })(i);
    });

}

for（i=0；i
您可以使用（立即调用函数表达式）

它是一种设计模式，也称为自执行匿名函数，包含两个主要部分。第一个是匿名函数，其词法范围包含在分组运算符（）中。这会阻止访问IIFE习惯用法中的变量，并污染全局范围

第二部分创建立即执行的函数表达式（），JavaScript引擎将通过该表达式直接解释函数

for (i = 0; i < pageSearchInput.length; i++) {


    pageSearchInput[i].addEventListener("focus", function(){
        return (function(i) {
            pageSearchContainer[i].style.outline = "4px solid #ffcc33";
            pageSearchButton[i].style.backgroundColor = "#008920";
            pageSearchButton[i].style.border = "1px solid #008920";
        })(i);
    });

}

您的代码应该是：

for (i = 0; i < pageSearchInput.length; i++) {
  (function(i){
     pageSearchInput[i].addEventListener("focus", function(){

       pageSearchContainer[i].style.outline = "4px solid #ffcc33";
       pageSearchButton[i].style.backgroundColor = "#008920";
       pageSearchButton[i].style.border = "1px solid #008920";

    });
  })(i);
}

for（i=0；i
您可以尝试使用iLife解决与范围相关的问题

for (i = 0; i < pageSearchInput.length; i++) {
   (function(j){
    return pageSearchInput[j].addEventListener("focus", function(){

        pageSearchContainer[j].style.outline = "4px solid #ffcc33";
        pageSearchButton[j].style.backgroundColor = "#008920";
        pageSearchButton[j].style.border = "1px solid #008920";

    })
  }(i))

}

for（i=0；i

有关详细信息，请参阅本文中的解释
谢谢，但我在问题中说我不想使用let。代码必须是IEcompatible@paddyfields这就是transpilers的用途。@paddyfields，我更新了我的答案。老实说，我不确定，但可能在循环之外定义
var i
？@ArthurWietzorek它可能已经在循环之外定义了？你为什么不直接使用
let
？这是让

存在的主要原因之一。因为IE10或更低版本不支持它，而我正在创建的网站需要这样做。当我明确表示不想在问题中使用此问题时，此问题已标记为“let”问题的重复。稍微触发幸福的事情，再次感谢。

for (i = 0; i < pageSearchInput.length; i++) {
   (function(j){
    return pageSearchInput[j].addEventListener("focus", function(){

        pageSearchContainer[j].style.outline = "4px solid #ffcc33";
        pageSearchButton[j].style.backgroundColor = "#008920";
        pageSearchButton[j].style.border = "1px solid #008920";

    })
  }(i))

}