Question

我有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

Answer 1

另一种选择是使用setInterval方法，然后根据索引选择要显示的元素：

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

var index = 0;
var total = $('rec').size() - 1;

setInterval(function(){

    var rec = $('rec:eq(' + index + ')');
    $('p.show-line').html(rec.text()).fadeIn("slow");

    if(index == total){
        index = 0;
    } else {
        index++;
    }

}, 5000);

工作示例：http://jsfiddle.net/3NnR2/15/

Answer 2

每个人都需要不同的setTimeout间隔。
您还需要在.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);

});

Answer 3

你在这里犯了一些错误。

没有文件就绪功能
您在错误的元素（fadeIn而不是.show-line）上调用rec

Here is怎么可能真的这样做：

$(document).ready(function(){
    $('.show > rec').hide();
    showNext($("rec:first-child"));

});

function showNext($ele){
    $ele.fadeIn('slow'); 
    if ($ele.next("rec").length > 0)
         setTimeout(function() {
           showNext($ele.next("rec"))  
         }, 5000);
}

Answer 4

也请回答我的问题。看起来这是一个很受欢迎的，看到使用的各种技术很有趣。

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/

在jquery.each中每5秒显示一次对象值

4 个答案: