使用 JQuery 循环数组

Loop over array with JQuery

本文关键字:数组 循环 JQuery 使用      更新时间:2023-09-26

我有一个小小组用Jquery迭代一个数组。我有一个数组,我希望数组中的每个项目都淡入和淡出(并在淡出时切换到下一个(。我可以让它循环适当的次数,但 for 循环总是显示最后一个变量,而不是按顺序显示每个变量。

var x = [1,2,3,4,5];
$("#test").text("test");
var y = 0;
for(var i = 0; i<x.length;i++){
   $("#test").delay(1000).animate({opacity:'0'},function(){
       $(this).text(i)
   }).delay(1000).animate({opacity:'1'});
}

因此,这里所指的 p 标签以"文本"开头,然后闪烁"5"五次而不是计数。我以为延迟会起作用,但 for 循环完成并且不会等待 jquery 完成。

我想你也可以用$.each来实现这一点:

var x = [1,2,3,4,5];
$("#test").text("test");
$.each(x, function(i) {
    $("#test").delay(1000).animate({opacity:'0'},function(){
        $(this).text(x[i])
    }).delay(1000).animate({opacity:'1'});
});

创建闭包

for (var i = 0; i < x.length; i++) {
   $("#test").delay(1000).animate({ opacity: '0' }, (function(i) {
       return function() { $(this).text(i); }
   })(i)).delay(1000).animate({ opacity: '1' });
}

您正在创建一个自执行函数,该函数将i存储在其上下文中,然后返回一个函数,该函数由于创建的闭包而也可以访问i变量。