重繪 頁面時如何按順序顯示其中一個 div？例如，打開頁面時會出現div 1，重繪 頁面時，下次重繪 時div 2會變為3 - 4 -5，等佇列結束后會回到開頭。
我正在研究的示例：
$(document).ready(function() {
let divs = document.querySelectorAll(".category");
for (let index = 0; index < divs.length; index ) {
$(divs[index]).show()
}
});.category {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="category">1</div>
<div class="category">2</div>
<div class="category">3</div>
<div class="category">4</div>
<div class="category">5</div>此處顯示頁面加載時的所有內容。我該如何解決這個問題？
uj5u.com熱心網友回復：
問題是因為您將所有潛水設定show()為回圈。如果您想在每次訪問頁面時更新可見元素，您需要存盤當前可見元素，以便在下次查看頁面時讀取它。我建議使用localStorage這個：
jQuery($ => {
let $divs = $(".category");
let lastShown = localStorage.getItem('lastCategoryIndex') || -1;
$divs.eq( lastShown % $divs.length).show();
localStorage.setItem('lastCategoryIndex', lastShown)
});
.category {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="category">1</div>
<div class="category">2</div>
<div class="category">3</div>
<div class="category">4</div>
<div class="category">5</div>
這是jsFiddle中的一個作業示例，因為 SO 片段是沙盒化的，并且不允許 localStorage 訪問。
uj5u.com熱心網友回復：
試試這個 javascript 解決方案 訪問這個鏈接以獲取演示JsFiddle
const countRefresh = localStorage.getItem('refreshTurn');
if(countRefresh != null){
foo(parseInt(countRefresh) - 1);
switch(countRefresh) {
case "1":
localStorage.setItem('refreshTurn', '2');
break;
case "2":
localStorage.setItem('refreshTurn', '3');
break;
case "3":
localStorage.setItem('refreshTurn', '4');
break;
case "4":
localStorage.setItem('refreshTurn', '5');
break;
case "5":
localStorage.setItem('refreshTurn', '1');
break;
default:
localStorage.setItem('refreshTurn', '1');
}
} else {
foo(0);
localStorage.setItem('refreshTurn', '1');
}
function foo(index){
$(document).ready(function () {
let divs = document.querySelectorAll(".category");
console.log(index);
$(divs[index]).show()
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/481017.html
標籤：javascript html jQuery
上一篇：為什么BigInt不是建構式，不像Number、Boolean和String？
下一篇：新發布AWS站點后資料未重繪