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显然出现＆amp;淡出那个div。在这个螺栓容器内有4个名为bolt-1到bolt-4的子div。这些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 divs随机出现一次没有动画。

到目前为止，我已经使用Google搜索并发现只有一个可能有用的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（也将应用于<div>下面的所有#bolt-container）：

#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'),

如何随机显示一个div

3 个答案: