簡體   English   中英

使用For循環簡化IF…Else語句[Javascript]

[英]Simplify IF…Else Statement with For Loop [Javascript]

上下文:我正在創建一個目錄,以通知用戶頁面已完成/已訪問。

下面的if ... else語句正在運行(本身),但是我想使用FOR循環中的“ i”計數器生成其他30章的檢查。

該腳本將首先加載包含表示已訪問/未訪問的值1或0的localstorage,並將該數據傳輸到變量chap1check。 根據結果​​,目錄應向用戶顯示已訪問或未訪問哪個頁面。

我不確定自己需要做什么,但從理論上講,我將需要用“ i”的值替換所有“第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>

只需將數字前的字符串部分與數字( 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;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM