为什么此代码中的console.log返回undefined？

var el = $('.container'); 
var anchors = new Array('jobs', 'portfolio', 'docs', 'interier', 'price'); 
for (var i = 0; i < anchors.length; i++) { 
    el.on('click', 'a[href$="#'+anchors[i]+'"]', function (e) { 
     e.preventDefault(); 
     console.log(anchors[i]); 
     $.scrollTo('a[name="'+anchors[i]+'"]'); 
    }); 
};

来源

2013-03-21 user2194521

有点儿offtopic：初始化像变种锚=阵列[“一”，“B”，“C”]应该是[使用Javascript封闭更快 – DVM 2013-03-21 10:05:53

可能重复内部循环 - 简单的实际例子]（http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example） – 2013-03-21 10:12:29

错误的范围，我没有在那里定义。 – 2013-03-27 23:41:10

当您单击该元素时，i将递增到值anchors.length。

您的点击处理程序有对i的引用。

JavaScript中未解决的属性查找返回undefined。

使用this作为元素的引用会容易得多。否则，找到一种方法来通过值来传递值i，而不是直接引用它。

来源

2013-03-21 10:01:27 alex

您未定义的原因是因为i实际上等于5。看看这个：这个循环完成后

现在你会认为i将在这个时间点是不确定的，因为它应该是本地的for循环。不幸的是，这种情况并非如此。一个简单的方法来测试这一点：

for (var i = 0; i < 5; i++) { 
    console.log(i); 
} 

console.log(i) // Logs out 5;

简而言之，的的i++ for循环获取真相测试部分执行后，将i < 5位。因此，当i等于4时，循环运行，之后它会增加i++，该值将i的值设置为5，这反过来不能通过真值测试。

所以现在你知道i等于5，当你在你的anchors数组中查找时，anchors[5]是未定义的。

的原因，这是很重要的，因为每一次点击事件触发，它会为i这是5，反过来，你将永远记录未定义

为了解决这个问题，我们可以创建执行缓存值别名的i价值，像这样

var el = $('.container'); 
var anchors = new Array('jobs', 'portfolio', 'docs', 'interier', 'price'); 

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

    // By passing the value to this self executing function, 
    // it creates a new instance of the variable 
    (function (index) { 
     el.on('click', 'a[href$="#'+anchors[index]+'"]', function (e) { 
     e.preventDefault(); 
      console.log(anchors[index]); 
      $.scrollTo('a[name="'+anchors[index]+'"]'); 
     }); 
    })(i); 

};

来源

2013-03-21 10:06:49 whitneyit

变量i拿到了最后一个循环的价值。如果您要访问的锚，你可以使用这个：

console.log($(this).attr('href').substr(1));

来源

2013-03-21 10:07:35 Armin

为什么此代码中的console.log返回undefined？

回答

相关问题