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

Anupam Ram 发表于 Dev

阿努帕姆（Anupam Ram）

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

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

Artur Filipiak

变量定义的问题已得到说明。

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

F.ex：

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

您必须将i变量存储在某个位置，以使它不会在循环持续时被更新，并且对于每个按钮而言始终是唯一的。

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

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。