2013-07-06 2 views
5

Я пытаюсь понять область переменной в Javascript. Вот что я делаю:javascript: локализовать переменные в блоке

<script> 
for (var i = 0; i < 3; i++) { 
    document.getElementById(i).onclick = function() { 
    console.log(i); 
    } 
} 
</script> 

Выход всегда 3, и я понимаю, что это потому, что i был сохранен в качестве ссылки. Как мне локализовать i, чтобы он мог регистрировать увеличенное значение?

Спасибо!

обновления

Спасибо, ребята для быстрых и порядочных ответов. решения действительно помогают!

Изначально я пытался аналогичный подход к @GrailsGuy, вот оно:

<script> 
for (var i = 1; i <= 3; i++) { 
    document.getElementById(i).onclick = function() { 
     console.log(logCall(i)); 
    } 
} 
function logCall(i) { 
    return i; 
} 
</script> 

Но, похоже, i не локализована. Не могу понять, почему!

+0

Есть ли у него что-то делать с этим событием OnClick? Как он может прокручивать onclick, если пользователь только щелкает один раз? И вам нужна функция logCall()? Разве это не будет так же, как console.log (i)? – oobie11

+0

Что касается вашего редактирования, это та же проблема, что и в вашем первом примере. Имеете ли вы 'console.log (i)' или 'superlongandconfusingfunctionname (i)' внутри обработчика событий, не имеет значения. Вы пытаетесь получить доступ к 'i' после завершения цикла. –

ответ

7

Создать новую область

for (var i = 0; i < 3; i++) { 
    (function(i) { 
    document.getElementById(i).onclick = function() { 
     console.log(i); 
    } 
    }(i)); 
} 
2

В Javascript область не создается скобками (в отличие от синтаксиса типа C). Сфера однако, созданная в функциях, поэтому один способ извлечь вызов в функцию (обновленный):

<script> 
for (var i = 0; i < 3; i++) { 
    logCall(i); 
} 

function logCall(i) { 
    document.getElementById(i).onclick = function() { 
     console.log(i); 
    } 
} 
</script> 

Это имеет дополнительное преимущество, что делает код немного более многоразовый.

+0

Почему downvote? – Igor

+0

Я не спустил вниз, но ваш код ничего не решает. – Prinzhorn

+1

Это неверно, http://jsfiddle.net/GaCPv/ – Musa

Смежные вопросы