Как увеличить имя идентификатора div и имя содержимого localStorage, используя for loop?

Question

Я пытаюсь запустить for цикл и увеличивает количество вещей здесь, но не могу получить мою голову вокруг него

JQuery кода

var counter1 = localStorage.getItem('counter1item'); 
if (counter1 == null){ 
    $("#i1").html('Zero'); 
} else { 
    $("#i1").html(counter1); 
} 
$("#i1").on("click", function(){ 
    counter1++; 
    $("#i1").html(counter1); 
    localStorage.setItem('counter1item', $("#i1").html()); 
}); 

Когда я Использовать for петли и попытаться увеличивать все, то не работает:

var i = 0; 
for(i=0;i<100;i++){ 
    var counter+"i" = localStorage.getItem('counter+"i"+item'); 
    if (counter+"i" == null){ 
     $("#i"+i).html('Zero'); 
    } else { 
     $("#i"+i).html(counter+"i"); 
    } 
    $("#i"+i).on("click", function(){ 
     counter+"i"++; 
     $("#i"+i).html(counter1); 
     localStorage.setItem('counter+"i"+item', $("#i"+i).html()); 
    }); 
} 

Что я делаю неправильно? Любая помощь будет оценена, спасибо.

Answer 1

Проблема определения переменных уже объяснена.

Другая проблема - При установке click событие внутри цикла, то counter и i переменные переопределены каждой итерации, таким образом, что каждая кнопка будет возвращать переменную, которая была установлена ​​в конце цикла.

f.ex:

Если цикл: i=0; i<100; i++, а затем в конце цикла i для каждая кнопка будет всегда равна 100. И counter всегда будет равен последнему набору counter +1, поскольку эти переменные теряют свою уникальность вне цикла.

Вы должны сохранить переменную i где-нибудь, чтобы она не обновлялась, пока цикл длится и всегда уникален для каждой кнопки.

Я бы сохранил i в атрибуте data-id кнопки и установить событие click на селекторе класса, вне for loop. Кроме того, поскольку данные представляют собой простую строку, вы можете использовать .text() вместо .html().

HTML:

<button class="counter" id="i0"></button> 
<button class="counter" id="i1"></button> 
... 

Сценарий:

// no need for this: 
//var i = 0; 
for(/* i is defined here: */ var i=0; i<10; i++){ 
    var c = localStorage.getItem('counter'+ i +'item'); 
    // add data-id to the element: 
    $("#i"+i).text(c == null ? 'Zero' : c).data('id',i); 
} 
// listen for click event on 'counter' class: 
$(document).on("click",".counter", function(){ 
    // parse number from text of the button: 
    var c = $(this).text(parseInt($(this).text())+1 || 1).text(); 
    // grab the id from data-id attribute: 
    localStorage.setItem('counter'+ $(this).data('id') +'item', c); 
}); 

DEMO

Answer 2

Удалить все цитаты вокруг использования переменных. Ввод их в кавычки делает их строку, а не ваша переменная (несколько экземпляров этой проблемы) ...

Как это:

'counter+"i"+item' 

Буквально переводится на эту строку:

counteriitem 

Say i = 2, вы должны написать так:

'counter'+i+'item' 

привести в этой строке:

counter2item 

Кроме того, я не вижу переменную counter, определенный во втором фрагменте правильно.