如何随机显示一个div

Question

下面是另一位用户在此处编写的代码，用于显示/隐藏一个随机延迟在4- 8秒之间的div

<script>
    function showCity() {

      $('#city-middle').show();
      window.setTimeout( hideCity, 10 );
    }

    function hideCity() {
      $('#city-middle').fadeOut(200);
      window.setTimeout( showCity, 3000 + (Math.random() * 5000) );
    }

    hideCity();
</script>

所以div #city-middle (显示和淡出)有一个名为#bolt-container的子DIV，它显然会随着该div一起出现和淡出。在这个螺栓容器中有4个子div，名为bolt-1到bolt-4。每个div都位于不同的位置。

<div id="city-middle">

    <div id="bolt-container">
        <div class="bolt-1">
        </div>
        <div class="bolt-2">
        </div>
        <div class="bolt-3">
        </div>
        <div class="bolt-4">
        </div>
    </div>
</div>

我需要的是让#bolt-1 - #bolt-4 div一次随机出现一个，没有动画。

到目前为止，我用谷歌搜索了一下，只找到了一个可能会有帮助的jsfiddle -- http://jsfiddle.net/tricinel/FgXDC/

我已经尝试了如下实现，但没有成功。

    function showCity() {
      $('#city-middle').show();
      window.setTimeout( hideCity, 10 );
    }

    function hideCity() {
      $('#city-middle').fadeOut(200);
      window.setTimeout( showCity, 3000 + (Math.random() * 5000) );
    }

    hideCity();


    var divs = $('#bolt-container').find('.div'),
    len = divs.length,
    randomDiv,
    speed = 1000;

var interval = setInterval(
                function() { 
                        randomDiv = Math.floor(Math.random()*len);
                        divs.removeClass('show');
                        divs.eq(randomDiv).addClass('show');                         
                } , speed);

我知道我的布局有问题，但作为一个初学者，我甚至不知道该去哪里看！会不会是我没有正确关闭第一个jQuery？或者没有为第二个函数设置某种形式的函数？

Answer 1

为了适应你发布的小提琴，你需要做的就是使用：

var divs = $('#bolt-container').find('div'), //fetch all the divs

注意，var divs = $('#bolt-container').find('.div')获取所有带有div 类(！)的元素，这些元素是id为#bolt-container的元素的后代。在您的示例中，您不需要这样做，您希望获取此类元素下的所有<div>。这就是上面改编的代码所做的事情。

别忘了CSS (也将应用于#bolt-container下面的所有<div> )：

#bolt-container div {
    display:none;
}

Check it working here。

Answer 2

我将遵循已经给出的建议(由@acdcjunior提供)：

var divs = $('#bolt-container').find('div');

和：

#bolt-container div {
    display:none;
}

但我也会将所有代码(不包括函数定义)放在以下代码之间：

$(document).ready(function() {
    // Put your code here.
});

以确保您的文档在使用其对象之前已加载。

Answer 3

var divs = $('#bolt-container').find('.div'),

应该是：

var divs = $('#bolt-container').find('div'),

或者简单地说：

var divs = $('#bolt-container div'),