.click () обратный вызов ссылается на локальную переменную из вызывающего метода вместо копирования по значению - PullRequest
Новая
       9

.click () обратный вызов ссылается на локальную переменную из вызывающего метода вместо копирования по значению

0 голосов
/ 07 мая 2010

Следующий код jQuery Javascript включен на пустой странице. 

var element;
$(function() {
  for (var i = 0; i < 10; i++) {
    element = $('<div>' + i + '</div>');
    element.click(function() {
      alert(i);
    });
    $('body').append(element);
  }
});

Желаемое поведение состоит в том, что этот код должен генерировать 10 элементов div, пронумерованных от 0 до 9. Когда вы нажимаете на элемент div, всплывающее окно с предупреждением покажет номер элемента div, на который вы нажали (т.е. элемент div с меткой «4», во всплывающем окне с предупреждением должен отображаться номер 4).

Вместо этого во всплывающем окне отображается число 10 независимо от того, на каком элементе div нажата кнопка.

Как я могу изменить этот код, чтобы он вел себя нужным образом?

Ответы [ 3 ]

3 голосов
/ 07 мая 2010

Вам необходимо передать переменную в качестве параметра функции.

Например: 

function buildElement(i) {
    var element = $('<div>' + i + '</div>');
    element.click(function() {
        alert(i);
    });
    $('body').append(element);
}

$(function() {
    for (var i = 0; i < 10; i++) {
        buildElement(i);
    }
});

Вы также можете сделать это с помощью встроенной анонимной функции, например: 

$(function() {
    for (var i = 0; i < 10; i++) {
        (function(i) {
            var element = $('<div>' + i + '</div>');
            element.click(function() {
                alert(i);
            });
            $('body').append(element);
        })(i);
    }
});
0 голосов
/ 08 мая 2010

Вы можете сделать одну из двух вещей. Вы можете использовать содержимое div для вывода is или получить индекс в массиве из селектора.

Это пример для содержания: 

element.click(function() {
  alert($(this).text());
});

Или для индекса: 

element.click(function() {
  alert($('div').index(this));
});

Я считаю, что оба должны работать

0 голосов
/ 08 мая 2010

Обычно я скрываю число в идентификаторе и получаю его структурированным образом: 

$(function() {
    for (var i = 0; i < 10; i++) {
        element = $('<div id="id-'+i+'">' + i + '</div>');
        element.click(function() {
            alert($(this).attr('id').split('-')[1]);
        });
        $('body').append(element);
    }
});
...