Помогите с простым циклом JavaScript

Question

У меня есть простой javascript, который я хотел бы зациклить для нескольких элементов.Вот мой код:

<script type='text/javascript'>  
for(i = 1; i < 100; i++)
{
$('#link'+i).click(function() {
    $('#container').removeClass();
    $('#container').addClass('templateid'+i);
});
}
</script>

То, чего я хотел бы добиться, это одна и та же функция addClass для нескольких идентификаторов (например, link2, link3, link4) с соответствующим классом (например, template2, template3, template4).

Любая помощь будет принята с благодарностью!

Для справки, отдельный вызов, подобный этому, работает, поэтому я не понимаю, почему цикл выше не функционирует одинаково:

<script type='text/javascript'> 
$('#link2').click(function() {
    $('#container').removeClass();
    $('#container').addClass('templateid2');
});
</script> 

Answer 1

Проблема здесь в том, что i внутри anonymous function для обработчика нажатия является ссылкой на циклы i и, следовательно, будет 100 для всех обработчиков нажатия после завершения цикла.

Это распространенная «ошибка» и для правильной работы требуется копия i на каждой итерации цикла.

function createHandler(i) {
    $('#link'+i).click(function(e) {
         $('#container').removeClass();
         $('#container').addClass('template'+i); // this 'i' won't change anymore
        e.preventDefault();                      // thus the code will add the correct class
        return false;
    });
}

for(var i = 0; i < 100; i++) {
    createHandler(i); // one could also create a closure here
}

См .: JavaScript Garden: замыкания - как избежать проблем со ссылками .

Answer 2

вы используете прототип? $ ('# link') должен вернуть элемент с id = "link", а [i] сужает его до атрибута i.

если вы хотите использовать переменную i из цикла, чтобы найти вашу ссылку2, ссылку3, .. попробуйте:

$('#link' + i).click { ...

Кроме того, ваш цикл кажется бесконечным.

Answer 3

Возможно, вы забыли отделить счетчик от строки

$('#link[' + i + ']').click(function() {
    $('#templateid').removeClass();
    $('#templateid').addClass('templateid[' + i + ']');