javascript - 遍历 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();
};

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

我在这里做错了什么？

Answer 1

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

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

将所有这些包装在一个函数中(在这里，我立即调用它，但给它一个标签，a，这样它就可以被引用，它不是匿名)并通过到最后的 .fadeIn() ，这样它就会继续循环，直到数组为空。

var tools = ["screwdriver", "wrench", "saw"];

(function a(){
    if (tools.length) {
        $("tool").delay(300).fadeOut(0, function(){
            $(this).html(tools.shift());
        }).delay(100).fadeIn(a);
    }
})();

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