迭代jQuery数组

Question

我正在尝试迭代数组并将值分配给元素：

<tool>hammer</tool>

var tools = ["screwdriver", "wrench", "saw"];
var i;
for (i=0; i < tools.length; ++i){
$("tool").delay(300).fadeOut().delay(100).html(tools[i]).fadeIn();
};

然而，这似乎不起作用，因为只有“锯”被指定为html值并且不断淡入淡出。

我在这里做错了什么？

Answer 1

jQuery.delay()在效果排队的项目之间暂停，因此您的.html()即时设置。因此，您只能看到saw。

解决方案是针对数组的长度废弃for循环和“循环”，将tool文本设置为数组中的下一个 first 项（当你删除它）。但是，您需要在队列的上下文中执行此操作，因此您可以使用.fadeOut()回调来执行此操作。

将所有这些包装在一个函数中（这里，我立即调用它，但给它一个标签，a，因此可以引用它，它不是匿名）并将其传递给{最后{1}}继续循环，直到数组为空。

.fadeIn()

http://jsfiddle.net/tc1q1vv7/1/