Question

上下文：我正在创建一个内容表，以告知用户他们已完成/访问过的页面。

下面的if ... else语句正在工作（单独）但我想使用FOR循环中的“i”计数器生成其他30章的检查。

该脚本将首先加载包含值1或0表示已访问/未访问的localstorage，并将该数据传输到变量chap1check。根据结果，内容表应该向用户显示哪个页面已经访问过或者没有被访问过。

我不确定我需要做什么，但理论上，我需要用“i”的值替换所有“chap 1 ...”。

<script type="text/javascript">

var i;
for (i = 1; i <=31; i++){
   var chap1Check = localStorage.getItem("chap1Status");

   if(chap1Check == "1"){
      document.getElementById('chap1Completion').innerHTML = "Completed";
   }else{
      document.getElementById('chap1Completion').innerHTML = "Incomplete";
   }
}
</script>

Answer 1

只需将数字前面的字符串部分与数字（i）连接起来，然后是数字后面的字符串部分。

for (var i = 1; i <= 31; i ++){
    var chapCheck = localStorage.getItem("chap" + i + "Status");
    document.getElementById('chap' + i + 'Completion').textContent = chapCheck == "1" ? "Completed" : "Incomplete";
}

Answer 2

以下代码可以使用。但是，将数组存储在本地存储中并通过索引数组来访问它会更加清晰。另外，请考虑在for循环中使用map仿函数。

另请注意，您应该在for循环中内联i的声明，如下所示。否则，您可能会因以后在for循环中使用i而产生冲突。

for (var i = 1; i <=31; i++){
   var chapterChecker = localStorage.getItem("chap"+i+"Status");

   if(chap1Check == "1"){
      document.getElementById('chap'+i+'Completion').innerHTML = "Completed";
   }else{
      document.getElementById('chap'+i+'Completion').innerHTML = "Incomplete";
   }
}

Answer 3

使用es6模板字符串的解决方案可以是

for (var i = 1; i <=31; i++){
   let content = '';
   if(localStorage.getItem(`chap${i}Status`) == "1"){
      content = "Completed";
   }else{
      content = "Incomplete";
   }
   document.getElementById(`chap${i}Completion`).innerHTML = content;
}

使用For循环简化IF ... Else语句[Javascript]

3 个答案: