如何在jQuery中循环数组

Question

我一直在尝试编写一个脚本来更改的文本。

诚然，我对jQuery并不是很精通，但找到了一些脚本。我进行了编辑，但无法使脚本循环，也不知道从哪里开始。任何代码提示或相关文档的链接将不胜感激。

以下是目前的jQuery：

function change() {
        $('#msg').html(options.pop()).fadeIn(750).delay(2000).fadeOut(750, change);
};

var options = [
    "Red Bull",
    "Smoke",
    "Babes",
    "css",
    "batman"
].reverse(); 
change();

在jsfiddle上可以找到：http://jsfiddle.net/5s8y3/214/

- Max Coates

---

你的小提琴似乎在工作。你需要什么？ - Basit

@BasitSaeed，它并不是在循环。它只是循环一次。 - Smeegs

@BasitSaeed 它停在数组的最后一个变量上 :< - Max Coates

Answer 1

停止使用数组弹出并使用迭代器

var messages = [
    "Red Bull",
    "Smoke",
    "Babes",
    "css",
    "batman"
],
    i = 0;

(function change() {
    var msg = messages[i>messages.length-1 ? i=0 : i++];
    $('#msg').html(msg).fadeIn(750).delay(2000).fadeOut(750, change);
})();

FIDDLE

- adeneo

---

我想我从未见过那种语法。不错（我想）。 - user1477388

这只是一个命名的IIFE和三元运算符，没有什么神奇的，但一开始可能会有点“奇怪”？ - adeneo

真的。如果您想要随机化它，这里有一个选项http://jsfiddle.net/5s8y3/221/。 - user1477388

我猜这似乎很奇怪，因为i=0：i++返回的是i，而不仅仅是设置它，这一点并不明显。 - user1477388

非常感谢您的答案和解释。 - Max Coates

Answer 2

编辑：我刚刚明白了你真正想要什么。

只需设置一个全局变量：

var i = 0;

现在，在您的change()函数中添加以下内容：

if(i < messages.length){
    i++;
}
else{
    i = 0;
}

这段代码将循环遍历您的数组，并在到达结尾时返回开头。

然后，将messages.pop()更改为messages[i]。

这是JSFiddle链接：http://jsfiddle.net/5s8y3/220/。

- Sebj

---

感谢 @sebj 的帮助 :) - Max Coates

Answer 3

问题在于Array.pop会从数组中移除元素，因此一旦它遍历完您的消息列表，就没有更多条目了，然后开始抛出错误。为了使其持续循环，请将新删除的消息添加到数组的前面：

function change() {
    var message = messages.pop();
    messages.unshift(messages);
    $('#msg').html(message).fadeIn(750).delay(2000).fadeOut(750, change);
};

- Anthony Grist

---

非常感谢您详细的解释！像我这样的初学者受益匪浅！非常感激！ - Max Coates

Answer 4

pop() 将从数组中移除值。因此，它只能在一个完整的循环中运行。在此之后，数组将为空。因此，它会显示空值。实际上，它在循环中运行。

var messages = [
    "Red Bull",
    "Smoke",
    "Babes",
    "css",
    "batman"
].reverse();

var i = messages.length;
function change() {
        i=(i%messages.length);
        $('#msg').html(messages[i++]).fadeIn(750).delay(2000).fadeOut(750, change);

};

- vivek_nk