我在主頁(yè)上有 X 個(gè) html div 元素，具有 X 個(gè)不同的類名：類=“home-1”類=“home-2”類=“home-3”類=“home-4”ETC。我的目標(biāo)是，僅隨機(jī)顯示這些“div”之一，因此當(dāng)頁(yè)面刷新時(shí)，每次都會(huì)顯示一個(gè)隨機(jī)不同的div。其余的應(yīng)該隱藏。如果同一個(gè) div 沒(méi)有連續(xù)顯示兩次，那就太好了，我想，我不能這樣做，只能使用 css。我手動(dòng)可以做的是.home-1 { display: none; }
.home-3 { display: none; }
.home-4 { display: none; }因此在本例中顯示 home-2。當(dāng)然，我希望使用 javascript 實(shí)現(xiàn)自動(dòng)化，有人可以幫助我嗎？你會(huì)很好的！
4 回答
瀟瀟雨雨
TA貢獻(xiàn)1833條經(jīng)驗(yàn) 獲得超4個(gè)贊
此代碼片段不會(huì)在 stackoverflow 上運(yùn)行，因?yàn)槟鸁o(wú)權(quán)訪問(wèn)本地存儲(chǔ)。但它應(yīng)該在您的環(huán)境中正常工作。
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>
慕虎7371278
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以找到以類名“home-”開頭的所有 div 元素，然后生成 0 到 X 之間的隨機(jī)數(shù)，并檢查 localStorage 或 sessionStorage 中最后保存的 div 編號(hào)，如果新的隨機(jī)數(shù)是前一個(gè)，則繼續(xù)生成數(shù)字。
請(qǐng)參閱下文（該腳本將不會(huì)運(yùn)行，因?yàn)?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>
慕碼人2483693
TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊
使用 Math.random() 并用您擁有的元素?cái)?shù)量作為種子：
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>
繁華開滿天機(jī)
TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以隨機(jī)找到該類，然后隱藏除具有隨機(jī)類的元素之外的所有元素：
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>
- 4 回答
- 0 關(guān)注
- 267 瀏覽
添加回答
舉報(bào)
0/150
提交
取消