4

下面是另一个用户在此处编写的代码，用于显示/隐藏具有 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 会出现并淡出。在这个 bolt-container 中有 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 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 的东西吗？或者没有为第二个设置某种形式的功能？

4

3 回答 3

3

要调整您发布的小提琴，您所要做的就是使用：

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

请注意，它会var divs = $('#bolt-container').find('.div')获取所有具有div class(!)的元素，这些元素是具有 id 的元素的后代#bolt-container。在您的示例中，您不希望这样，您想获取<div>以下所有此类元素。这就是上面改编的代码所做的。

并且不要忘记 CSS（也将应用于<div>以下所有内容#bolt-container）：

#bolt-container div {
    display:none;
}

检查它在这里工作。

于 2013-07-19T23:17:50.607 回答
3

我会遵循已经给出的建议（@acdcjunior）：

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

和：

#bolt-container div {
    display:none;
}

但我也会将所有代码（不包括函数定义）放在：

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

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

于 2013-07-19T23:29:27.240 回答
2 
var divs = $('#bolt-container').find('.div'),

应该：

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

或者简单地说：

var divs = $('#bolt-container div'),
于 2013-07-19T23:17:52.043 回答