遍歷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循環並針對數組的長度進行“循環”，將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/