Javascript 显示CSS类选择的X个div中的随机div

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

• class=“home-1”
• class=“home-2”
• class=“home-3”
• class=“home-4”
• 等等

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

我能做的是

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

因此，在本例中显示home-2

当然我想用javascript实现自动化，有人能帮我吗

你会很好的

使用Math.random（）并使用您拥有的元素数对其进行种子设定：

let els=document.querySelectorAll（“.home”）
设num=Math.floor（Math.random（）*els.length）
els[num].style.display=“内联块”

.home{显示：无；填充：15px}
.home-1{背景色：浅蓝色}
.home-2{背景色：黄色}
.home-3{背景色：粉红色}
.home-4{背景色：海绿；颜色：#fff}

1
2.
3.
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'）
home-1
home-2
home-3
home-4
home-5
此代码段不会在stackoverflow上运行，因为不允许您访问本地存储。但它在你的环境中应该可以正常工作。
const elements=document.querySelectorAll（'div[class^=home-]）；
const lastIndex=Number（localStorage.getItem（'lastElement'）；
设randomIndex=lastIndex；
做{
randomIndex=Math.floor（Math.random（）*elements.length）；
}而（randomIndex==lastIndex）；
常量随机化元素=元素[随机化索引]；
randomElement.style.display='block'；
setItem（'lastElement'，randomIndex）
div[class^=home-]{
显示：无；
}
home-1
home-2
home-3
home-4
home-5
您可以找到以类名“home-”开头的所有div元素，然后生成一个介于0和X之间的随机数，并检查localStorage或sessionStorage以查找上次保存的div编号，如果新的随机数是上一个，则继续生成编号

请参见下面的内容（脚本将不会运行，因为本地存储在此不起作用-如此）：


函数随机化（）{
设divs=document.querySelectorAll（'div[class^=“home”]”）；
设长度=divs.length；
让currDiv=localStorage.getItem（“divActive”）；
rand=getNextRndm（currDiv，长度）；
对于（var i=0；iIs该类始终采用以下格式：
home-n
其中n是一个数字？您应该已经尝试过，并向我们演示了一个，以帮助您进行调试。否则这是一个编码请求，与主题无关。@Taplar我以前做过一些研究，没有类似的问题，不知道您的问题是什么s、 …正如我所说的，这个问题还没有提供一个解决问题的明显尝试。如果没有这样的尝试，我们只能假设你只是在要求一个解决方案，因此是一个编码请求。这对于网站来说是离题的。我链接到的第一篇帖子谈到了这一点。