javascript - 显示随机 div 的框

Question

我正在尝试创建一种可以显示随机 div 的盒子。例如有关动物的有趣事实。我找到了一些代码，自己写了一些代码，它的工作方式如下: 1.页面加载时随机加载div 2. 每次用户单击按钮时都会加载下一个随机 div:“随机有趣的事实”

在下面的代码中，“随机有趣的事实”按钮仅有效一次。我怎样才能让它持续工作？我的意思是我可以点击它 100 次，它将显示 100 个不同的 div。这是我的第二个问题:当使用例如 100 个 div(有很多关于动物的有趣事实)时，下面的代码会很长，是否有更简单的方法来创建某种循环？有大量的 slider ，但我找不到我需要的东西。任何帮助将不胜感激。

<div id="box">
  <div id="funfact1">
      <p>
      Squirrels plant thousands of new trees each year simply by           forgetting where they put their acorns. </p>
    </div><!-- end funfact1 -->

    <div id="funfact2">
      <p>Macaques in Japan use coins to buy vending machine snacks.       </p>
    </div><!-- end funfact2 -->

    <div id="funfact3">
      <p>Japanese Macaques make snowballs for fun. </p>
    </div><!-- end funfact3 -->

    <div id="funfact4">
      <p>Dogs’ nose prints are as unique as human fingerprints and       can be used to identify them. </p>
    </div><!--end funfact4 -->
    <div id="buttonDiv">
      <button id="buttonShuffle">Random fun fact</button>
     </div><!-- end buttonDiv -->
</div><!-- end div box -->
<script type="text/javascript">
randomNumber = Math.floor(Math.random()*4+1);

window.onload = function() {
    if (randomNumber == 1) {
        document.getElementById("funfact1").style.display = "inline";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber == 2) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "inline";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber == 3) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "inline";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber == 4) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "inline";
    }
}

randomNumber1 = Math.floor(Math.random()*4+1);
    document.getElementById("buttonShuffle").onclick=function() {
    if (randomNumber1 == 1) {
        document.getElementById("funfact1").style.display = "inline";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber1 == 2) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "inline";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber1 == 3) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "inline";
        document.getElementById("funfact4").style.display = "none";
    }
    if (randomNumber1 == 4) {
        document.getElementById("funfact1").style.display = "none";
        document.getElementById("funfact2").style.display = "none";
        document.getElementById("funfact3").style.display = "none";
        document.getElementById("funfact4").style.display = "inline";
    }
}

</script>

Fiddle

Answer 1

如果你想保留所有的div并编写较少重复的代码，你可以尝试这个。一般来说，当您编写代码时，请尝试识别重复并将其导出到函数中。

window.onload = function() {

  // show random fact on load
  randomFact()

  // show random fact on button click
  document.getElementById("buttonShuffle").addEventListener('click', randomFact)
}

function randomFact () {
  // generate random
  var random =  Math.floor(Math.random() * 4)

  // get all facts
  var funfacts = document.getElementsByClassName('funfact')

  // hide all facts
  for (var i = 0; i < funfacts.length; i++) {
    funfacts[i].style.display = 'none'
  }

  // show one
  funfacts[random].style.display = 'inline'
}

https://jsfiddle.net/kxv7y6x9/