Функция неправильно разделяет данные из объекта в журнале консоли, но отображается прямо как якорь?

Кажется, моя функция неправильно отображает имена в журнале консоли, разделенные после нажатия, как я пытаюсь реализовать правильно. Это дает мне эту неопределенную ошибку, отображаемую здесь: введите описание изображения здесь

Однако код, который он выдает с ошибкой, "response.data[i]" , правильно отображается на стороне html в теге привязки, как показано в коде (по ссылке ниже) и на этом снимке экрана:

введите здесь описание изображения

Итак, как это не определено при нажатии, чтобы разделить имя в журнале консоли, но четко работает, когда оно отображается? Также console.log(response.data); команда четко отображает response.data , как показано здесь:

введите здесь описание изображения

Так что я просто не понимаю, как это исправить, чтобы правильно отображать имена в журнале консоли после нажатия, будь то имя из двух слов или имя из трех слов.

Код:

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) });
        }
    });
}

person user2122206    schedule 27.03.2013    source источник


Ответы (1)


Это типичная проблема закрытия.

Значение i будет равно response.data.length, когда сработает обработчик click.

Вы должны связать значение для 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])));

Я надеюсь, что это поможет вам понять, как работают замыкания.

person Halcyon    schedule 27.03.2013
comment
Отлично, кажется, все работает отлично, только теперь проблема заключается в том, что когда я нажимаю имя, он отображает данные каждого отдельного объекта из имени, а не только тот, по которому щелкнули. Также кажется, что первая ссылка (якорь li) на странице - единственная, которая регистрируется в консоли, в то время как остальные ничего не запускают. - person user2122206; 27.03.2013
comment
Также получаю это в консоли TypeError: response.data[i] is undefined [Break On This Error] ...‹/a› + ‹br /›+ ‹h4›# ответов: ‹/h4› + response.data[ i].comments.count + ... - person user2122206; 27.03.2013
comment
Есть и другие проблемы с вашим кодом. Вам не разрешено определять функции или переменные в цикле for. Часть вашей логики может зависеть от этого. Цикл for в JavaScript фактически не создает новую область видимости. Только функции создают новые области видимости. - person Halcyon; 27.03.2013
comment
Я изменил его с #splitName на .splitName (идентификатор на класс), и теперь все ссылки доступны для кликов, я полагаю, что это связано с тем, что счетчик идентификаторов действует друг с другом и позволяет щелкнуть только первый. Они по-прежнему отображают их все, а не в одиночку, когда все еще щелкают. Вот мой новый код: pastebin.com/nYZEpU7k - person user2122206; 27.03.2013