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

上下文：我正在创建一个目录，以通知用户他们已完成/访问的页面

下面的if…else语句（本身）正在工作，但我想使用for循环中的“i”计数器为其他30章生成检查

脚本将首先加载包含值1或0（表示已访问/未访问）的localstorage，并将该数据传输到变量chap1check上。根据结果，目录应向用户显示哪些页面已被访问或未被访问

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

var i；
对于（i=1；i只需将数字前的字符串部分与数字（
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";
}

for（var i=1；i只需将数字前的字符串部分与数字（
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";
}

for（var i=1；i下面的代码可以工作。但是如果您只在本地存储中存储一个数组，并通过对数组进行索引来访问它，会更干净。另外，请查看在for循环上使用
映射
函子

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";
   }
}

还请注意，您应该在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";
   }
}

for（var i=1；i下面的代码可以工作。但是如果您只在本地存储中存储一个数组，并通过对数组进行索引来访问它，会更干净。另外，请查看在for循环上使用
映射
函子

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";
   }
}

还请注意，您应该在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";
   }
}

for（var i=1；i使用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（var i=1；i使用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（var i=1；我请不要只发布代码答案。（编辑：我看到您刚刚编辑了此内容）innerHTML应替换为textContent。请不要只发布代码答案。（编辑：我看到您刚刚编辑了此内容）innerHTML应替换为textContent.chap1Check也应增加？chap2Check等？chap1Check也应增加？chap2Check等？