刷新页面时如何按顺序显示其中一个 div？

Question

如何在刷新页面时按顺序显示 div 之一？例如，打开页面时会出现div1，刷新页面时，div2会在下次刷新时变为3 - 4 -5，当队列结束时，它将 return 到开头。

我正在处理的示例：

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

这里显示的是页面加载时的所有内容。我该如何解决？

Answer 1

这个问题是因为你在一个循环中将所有潜水设置为 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 访问。

Answer 2

尝试此 javascript 解决方案访问此 link 进行演示 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()
      });
  }

刷新页面时如何按顺序显示其中一个 div？

How do I show one of the divs sequentially when the page is refreshed?

html

javascript

jquery