功能不能正常分裂的數據，但顯示右錨？

Question

看來我不能正常發揮顯示名稱在控制檯日誌分裂一次點擊，因爲我想正確實施。它讓我在此顯示這個未定義的錯誤：

然而，它的示數出來的代碼，「response.data [I]」，正確地在錨標記上的HTML端顯示在代碼中看到的（從下面的鏈接），這個截圖：

那麼如何被點擊時分頭在控制檯日誌的名字，但很明顯的工作，因爲它是正在顯示它未定義？還有console.log（response.data）;命令明確顯示response.data的，如下所示：

所以我只是沒有得到如何解決這個問題能夠正確顯示控制檯日誌的名字一次點擊，閹它是一個2單詞名稱或3個單詞的名稱。

代碼：

function getGroupWall() { 
    $("#groupUL").html(""); 
    FB.api('/421727124532461/feed', 'get', function(response){ 
     console.log(response.data); 
     for (i=10, j=response.data.length; i<=j; i++) { 
      function splitName(txt){ 
       var myString = txt; 

       var mySplitResult = myString.split(" "); 

       console.log("The first element is " + mySplitResult[0]); 
       console.log("<br /> The second element is " + mySplitResult[1]); 
       console.log("<br /> The third element is " + mySplitResult[2]); 

      }; 
      $("#groupUL").append("<li>" + "<h4>Item Description:</h4> " + response.data[i].message + "<br /> " + "<h2>Posted By:</h2> <a href='#' id='splitNames'>" + response.data[i].from.name + "</a>" + "<br />"+ "<h4># of Replys: </h4>" + response.data[i].comments.count + "<br />" + "<a href='" + response.data[i].link + "' target='new' style='text-align:right;'>(external url)</a>" + "<br /> " + "<img src='"+response.data[i].picture+"'>" + "</li><br />"); 
      $("#splitNames").click(function(){ splitName(response.data[i].from.name) }); 
     } 
    }); 
} 

Answer 1

這是一個典型的封閉問題。

當click處理程序觸發時，i的值將爲response.data.length。

你必須綁定像這樣爲i值：

$("#splitNames").click((function (i) { // extra "(" indicating immediate invocation 
    // return an anonymous function that has a value for "i" in it's scope 
    return function (event) { // event is the click event, or whatever is usually passed to it 
     splitName(response.data[i].from.name) 
    } 
}(i))); // immediate invocation to bind "i" 

你也可以這樣做：

$("#splitNames").click((function (item) { 
    return function (event) { 
     splitName(item.from.name) 
    } 
}(response.data[i]))); 

我希望這有助於你理解閉包是如何工作的。