Question

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]+'"]');
    });
};

Answer 1

点击该元素后，i会增加到anchors.length的值。

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

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

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

Answer 2

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

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

现在，在循环完成之后，您会认为此时i未定义，因为它应该是for循环的本地。不幸的是，这种情况并非如此。一种简单的测试方法：

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

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

简单地说，for循环的i++在真值测试部分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 ); };的别名

{{1}}

Answer 3

变量i得到了最后一个循环的值。如果要访问锚点，可以使用：

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

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

3 个答案: