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

Simplify IF...Else Statement with For Loop [Javascript]

本文关键字：简化 IF Else 语句 Javascript For 循环 使用      更新时间：2023-09-26

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

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

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

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

<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>

只需将数字之前的字符串部分与数字（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循环上使用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";
   }
}

使用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;
}
相关文章：