javascript - For 循环不会将 i 变量传递给循环内的 Jquery 函数

Question

我有一个 for 循环，它不会将其 i 变量或任何类型的变量传递到编码为在每个循环中运行的 Jquery 函数中。

for (var i = 0; i < result.length; i++) {
    $('#frame-' + i + '').fadeOut(function () {
        ALERT(i);
        document.getElementById('frame-' + i + '').getElementsByTagName('img')[0].src = 'img/' + result.cat[i].id + '.png';

    });
    $('#frame-' + i + '').fadeIn();

}

我发现我可以使用 .on 或 .bind 函数，但我不知道如何使用 fadeOut() 来完成它。

fadeOut.on() 不起作用。

有什么建议可以让它发挥作用吗？

Answer 1

问题是，当您的 fadeOut 完成时，for 循环已经完成，因此，淡入淡出代码正在读取的 i 值将始终相同(最后一个值) )。

创建一个闭包来传递i的值。这将为您提供 i 的本地副本，该副本不会被 for 循环覆盖。还将 ALERT() 更改为 alert() (Javascript 区分大小写)。

for (var i = 0; i < result.length; i++) {
    (function(i){
        $('#frame-' + i).fadeOut(function () {
            alert(i);
            document.getElementById('frame-' + i + '').getElementsByTagName('img')[0].src = 'img/' + result.cat[i].id + '.png';

        }).fadeIn();
    })(i);
}