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

【问题标题】：How to increment div id name and localStorage content name using for loop?如何使用 for 循环增加 div id 名称和 localStorage 内容名称？
【发布时间】：2015-04-23 05:21:19
【问题描述】：

我正在尝试运行 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());
    });
}

我做错了什么？任何帮助将不胜感激，谢谢。

【问题讨论】：

你不能像var counter+"i"这样声明变量

标签： javascript jquery html dom local-storage

【解决方案1】：

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

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

F.ex：

如果循环是：i=0; i<100; i++，那么在循环结束时，每个按钮的 i 将始终等于 100。而counter 将始终等于最后一组counter +1，因为这些变量在循环之外失去了它们的唯一性。

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

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

【讨论】：

【解决方案2】：

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

像这样：

'counter+"i"+item'

字面上翻译成这个字符串：

counteriitem

说i = 2，你会这样写：

'counter'+i+'item'

产生这个字符串：

counter2item

另外，我没有正确看到第二个 sn-p 中定义的变量 counter。

【讨论】：