显示 CSS-Class 选择的 X div 中的随机 div [关闭]答案

【问题标题】：Display random div from X divs selected by CSS-Class [closed]显示 CSS-Class 选择的 X div 中的随机 div [关闭]
【发布时间】：2020-07-08 11:42:54
【问题描述】：

在主页上，我有一页中有 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 自动化，有人可以帮我吗？

你会非常好！

【问题讨论】：

类是否总是采用这种格式：home-n 其中 n 是一个数字？
meta.stackoverflow.com/questions/261592/…你应该已经尝试过了，并演示了一个minimal reproducible example让我们帮助你调试。否则，这是一个编码请求，不在主题范围内。
@Taplar 我之前做过一些研究，没有类似的问题，不知道你的问题是什么......
正如我所说，该问题尚未提供解决问题的明显尝试。没有这些，我们只能假设您只是在寻求解决方案，因此是编码请求。这是该网站的主题。我链接到的第一篇文章谈到了这一点。

标签： javascript html css random

【解决方案1】：

使用 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>

【讨论】：

【解决方案2】：

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

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>

【讨论】：

【解决方案3】：

此 sn-p 不会在 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>

【讨论】：

【解决方案4】：

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

【讨论】：