爲什麼此代碼中的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？

回答

相關問題