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

Question

我在主页上有 X 个 html div 元素，具有 X 个不同的类名：类=“home-1”类=“home-2”类=“home-3”类=“home-4”ETC。我的目标是，仅随机显示这些“div”之一，因此当页面刷新时，每次都会显示一个随机不同的div。其余的应该隐藏。如果同一个 div 没有连续显示两次，那就太好了，我想，我不能这样做，只能使用 css。我手动可以做的是.home-1 { display: none; } .home-3 { display: none; } .home-4 { display: none; }因此在本例中显示 home-2。当然，我希望使用 javascript 实现自动化，有人可以帮助我吗？你会很好的！

Answer 1

此代码片段不会在 stackoverflow 上运行，因为您无权访问本地存储。但它应该在您的环境中正常工作。

const elements = document.querySelectorAll('div[class^=home-]');

const lastIndex = Number(localStorage.getItem('lastElement'));

let randomIndex = lastIndex;

do {

  randomIndex = Math.floor(Math.random() * elements.length);

} while (randomIndex === lastIndex);

const randomElement = elements[randomIndex];

randomElement.style.display = 'block';

localStorage.setItem('lastElement', randomIndex);

div[class^=home-] {

  display: none;

}

<div class="home-1">home-1</div>

<div class="home-2">home-2</div>

<div class="home-3">home-3</div>

<div class="home-4">home-4</div>

<div class="home-5">home-5</div>

Answer 2

您可以找到以类名“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>

Answer 3

使用 Math.random() 并用您拥有的元素数量作为种子：

let els = document.querySelectorAll(".home")

let num = Math.floor(Math.random() * els.length)

els[num].style.display = "inline-block"

.home{display: none; padding: 15px}

.home-1{background-color: lightblue}

.home-2{background-color: yellow}

.home-3{background-color: pink}

.home-4{background-color: seagreen;color:#fff}

<div class="home home-1">1</div>

<div class="home home-2">2</div>

<div class="home home-3">3</div>

<div class="home home-4">4</div>

Answer 4

您可以随机找到该类，然后隐藏除具有随机类的元素之外的所有元素：

var classList = Array.from(document.querySelectorAll('[class^=home-]')).map(el => el.className);

var random = classList[Math.floor(Math.random() * classList.length)];

document.querySelectorAll(`[class^=home-]:not(.${random})`).forEach(el => el.style.display = 'none');

<div class="home-1">home-1</div>

<div class="home-2">home-2</div>

<div class="home-3">home-3</div>

<div class="home-4">home-4</div>

<div class="home-5">home-5</div>