如何使用 for 循环递增 div id 名称和 localStorage 内容名称？

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

删除变量使用周围的所有引号。将它们放在引号中使它们成为字符串，而不是您的变量（此问题的多个实例）...

像这样：

'counter+"i"+item'

直译为这个字符串：

counteriitem

说i = 2，你会这样写：

'counter'+i+'item'

得到这个字符串：

counter2item

此外，我没有看到第二个代码段中正确定义的变量 counter。

Answer 2

你的变量定义问题已经解释过了。

另一个问题 - 在循环中设置 click 事件时，每次迭代都会覆盖 counter 和 i 变量，因此每个按钮都会 return 变量在循环结束时设置。

F.ex:

如果循环是：i=0; i<100; i++，那么在循环结束时 i for each button 将始终等于 100.而counter将永远等于最后一组counter+1，因为这些变量在循环外失去了唯一性。

您必须将 i 变量存储在某个地方，这样它就不会在循环持续时得到更新，并且对于每个按钮始终是唯一的。

我将 i 存储在按钮的 data-id 属性中，并在 for 循环外的 class 选择器上设置点击事件。此外，由于数据是一个简单的字符串，您可以使用 .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

如何使用 for 循环递增 div id 名称和 localStorage 内容名称？

How to increment div id name and localStorage content name using for loop?

html

javascript

jquery

dom

local-storage