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属性中，并在类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);
});

DEMO

Answer 2

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

像这样：

'counter+"i"+item'

逐字翻译为此字符串：

counteriitem

说i = 2，你会这样写：

'counter'+i+'item'

得到这个字符串：

counter2item

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

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

2 个答案: