javascript - 显示随机 div javascript，有时只显示 div

Question

我正在尝试设置一个 404 页面，这样每次用户点击它时它都会显示一个随机图形。目前我的编码方式，图形只在某些时候加载(我会说现在大约是 50/50)。只是在寻找一种更好的编码方式，以便每次都显示其中一个 div。

这是我的 HTML:

<div id="errorpages">
    <div class="error">
        <img src="404.gif">
    </div>

    <div class="error">
        <img src="4042.gif">
    </div>
</div>

和 JavaScript:

<script type="text/javascript">
this.random404 = function(){
    var length = $("#errorpages div").length;
    var ran = Math.floor(Math.random()*length) + 1;
    $("#errorpages div:nth-child(" + ran + ")").show();
};
$(document).ready(function(){
    $('.error').hide();
    random404();
});
</script>

非常感谢任何帮助，谢谢!

Answer 1

为什么循环div？它增加了很多额外的代码。只需将图像设置为一个数组，然后从那里处理 Math.rand。不需要Jquery。

<script type="text/javascript">
var images = [], index = 0;
images[0] = "Caption 0 <img src='1.gif'>";
images[1] = "Caption 1 <img src='2.gif'>";
images[2] = "Caption 2 <img src='3.gif'>";
images[3] = "Caption 3 <img src='4.gif'>";
images[4] = "Caption 4 <img src='5.gif'>";
images[5] = "Caption 5 <img src='6.gif'>";
images[6] = "Caption 6 <img src='7.gif'>";
images[7] = "Caption 7 <img src='8.gif'>";
index = Math.floor(Math.random() * images.length);
document.write("<p>Head</p>" + images[index] + "<p>Foot</p>");
</script>