显示 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 {&nbsp; 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-] {&nbsp; 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() {&nbsp; let divs = document.querySelectorAll('div[class^="home"]');&nbsp; let length = divs.length;&nbsp; let currDiv = localStorage.getItem("divActive");&nbsp;&nbsp;&nbsp; rand = getNextRndm(currDiv, length);&nbsp;&nbsp;&nbsp; for(var i=0; i<length; i++) {&nbsp; &nbsp; if(i != rand) {&nbsp; &nbsp; &nbsp; divs[i].style.display = "none";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; divs[i].style.display = "block";&nbsp; &nbsp; &nbsp; localStorage.setItem("divActive", rand);&nbsp; &nbsp; }&nbsp; }}function getNextRndm(currDiv, length) {&nbsp; let rand = Math.floor(Math.random() * length);&nbsp; if(currDiv !== null) {&nbsp; &nbsp; while(rand == currDiv)&nbsp; &nbsp; &nbsp; rand = Math.floor(Math.random() * length);&nbsp; }&nbsp; 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>