javascript - 显示 CSS-Class 选择的 X div 中的随机 div

Question

我在主页上有一页中有 X 个 html div 元素，具有 X 个不同的类名：

• 类=“家-1”
• 类=“家-2”
• 类=“家-3”
• 类=“家-4”
• 等等

我的目标是，随机只显示其中一个“div”，所以当页面刷新时，每次都会显示一个随机不同的 div。其余的应该隐藏。如果同一个 div 没有连续显示两次，那就太好了，我不能这样做，只能使用 css。

我手动可以做的是

.home-1 { display: none; }
.home-3 { display: none; }
.home-4 { display: none; }

所以在这种情况下 home-2 显示。

当然我想用javascript自动化，有人可以帮我吗？

那你会很好的！

标签： javascripthtmlcssrandom

Answer 1

您可以找到所有以类名“home-”开头的 div 元素，然后生成一个介于 0 和 X 之间的随机数，并检查 localStorage 或 sessionStorage 以获取最后保存的 div 编号，如果新的随机数是前一个，则继续生成数字。

见下文（脚本不会运行，因为 localStorage 在这里不起作用 - 在 SO 上）：

function randomize() {
  let divs = document.querySelectorAll('div[class^="home"]');
  let length = divs.length;
  let currDiv = localStorage.getItem("divActive");
  
  rand = getNextRndm(currDiv, length);
  
  for(var i=0; i<length; i++) {
    if(i != rand) {
      divs[i].style.display = "none";
    } else {
      divs[i].style.display = "block";
      localStorage.setItem("divActive", rand);
    }
  }
}

function getNextRndm(currDiv, length) {
  let rand = Math.floor(Math.random() * length);

  if(currDiv !== null) {
    while(rand == currDiv)
      rand = Math.floor(Math.random() * length);
  }
  return rand;
}

randomize();

<div class="home-1">1st div</div>
<div class="home-2">2nd div</div>
<div class="home-3">3rd div</div>
<div class="home-4">4th div</div>