1

アイテムごとに5秒間表示したい5つのアイテムのコレクションがあります。次の HTML コードを次に示します。

<div class="show">
 <rec>First item</rec>
 <rec>Second item</rec>
 <rec>Third item</rec>
 <rec>Fourth item</rec>
 <p class="show-line"></p>
</div>

そして、ここでJquery

 $('.show > rec').hide();

 $('rec').each(function(index) { 
  var x = $(this).text();
    setTimeout(function() {
      $('p.show-line').html(x).fadeIn('slow');  
    }, 5000);

 });

ここでの問題は、show-line 要素で最後のアイテムのみが出力されることです。しかし、私が x 要素に警告しているとき、その出力は正しい値です。では、各要素を 5 秒間表示してから非表示にして次の要素を表示するにはどうすればよいでしょうか...

これが実際の例ですhttp://jsfiddle.net/3NnR2/11/

TNX

4

4 に答える 4

0

私の答えも投げ入れます。これが人気だったようで、いろいろな技法が使われているのが面白いです。

var i = 0;
var items = [];

$('.show > rec').hide();

$('rec').each(function(index) {
    var x = $(this).text();
    items[items.length] = x;
});

function rotate() {

    setTimeout(function() {
        if (i > items.length) {
            i = 0;
        }
        $('p.show-line').html(items[i]).hide().fadeIn('slow');
        i++;
        rotate();
    }, 5000);
}

rotate();​

基本的な考え方は、項目を配列に入力し、再帰を使用してそれらを永久にループすることです。作業例: http://jsfiddle.net/3NnR2/17/

于 2012-12-22T18:35:36.327 に答える
0
  1. それぞれに異なる setTimeout 間隔が必要です。
  2. .hide()前の要素も必要です.fadeIn()

次のことを試してください。

$('.show > rec').hide();

$('rec').each(function(index) { 
    var x = $(this).text();
    setTimeout(function() {
       $('p.show-line').html(x).hide().fadeIn('slow');  
     }, index * 5000);

});
于 2012-12-22T18:17:01.007 に答える