javascript - 我想随机显示 div - 我该怎么做？

Question

<分区>

Answer 1

对于您的方法，您需要遍历元素并将样式 display: block(可见)设置为随机元素，同时使用样式 display: none 隐藏其他元素。

这是一个完整的例子:

var w = document.getElementById('wrapper');
var button = document.getElementById('randomize');
var quotes = w.children; // inner elements, your quotes divs

// a function to hide all divs
var hideDivs = function(divs) {
  for (var div of divs) {
    div.style.display = 'none';
  }
}

hideDivs(quotes); // hide all initially

// on click
button.addEventListener('click', function(event) {
  var rnd = Math.floor(Math.random() * quotes.length); // get random index
  hideDivs(quotes); // hide all quotes
  quotes[rnd].style.display = 'block'; // show random quote
  event.target.textContent = 'Click one more time!'; // set button text. event.target is the button you've clicked
})

<div id="wrapper">
  <div class="quote">Chuck Norris counted to infinity... Twice.</div>
  <div class="quote">Chuck Norris has already been to Mars; that's why there are no signs of life there.</div>
  <div class="quote">Guns don't kill people. Chuck Norris kills People.</div>
  <div class="quote">There is no theory of evolution. Just a list of animals Chuck Norris allows to live.</div>
  <div class="quote">Chuck Norris uses pepper spray to spice up his steaks.</div>
</div>
<button id='randomize'>Randomize</button>