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 とともに表示およびフェードアウトします。このボルト コンテナー内には、ボルト 1 からボルト 4 という名前の 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 がアニメーションなしで 1 つずつランダムに表示されることです。

これまでのところ、これをグーグルで調べたところ、役立つ可能性のあるjsfiddleが1つだけ見つかりました- 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 を正しく閉じていない可能性がありますか? または、2 番目の関数に何らかの形式の関数を設定していませんか?

4

3 に答える 3

3

投稿したフィドルを適応させるには、次を使用するだけです。

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

id を持つ要素の子孫であったclass(!)var divs = $('#bolt-container').find('.div')を持つすべての要素をフェッチすることに注意してください。あなたの例では、それは望ましくありません。以下のそのような要素をすべてフェッチしたいと考えています。それが、上記の適合コードが行うことです。div #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 に答える