我在主頁上有 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 實現自動化，有人可以幫助我嗎？你會很好的！
4 回答
瀟瀟雨雨
TA貢獻1833條經驗 獲得超4個贊
此代碼片段不會在 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>
慕虎7371278
TA貢獻1802條經驗 獲得超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>
慕碼人2483693
TA貢獻1860條經驗 獲得超9個贊
使用 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>
繁華開滿天機
TA貢獻1816條經驗 獲得超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>
- 4 回答
- 0 關注
- 269 瀏覽
添加回答
舉報
0/150
提交
取消