javascript - jQuery:div 的选择器存储在变量中时未定义

Question

好吧，这个开始吓坏我了: 我在“tooltipBox”类中有几个 div 容器，但内容不同。在我的小脚本中，我尝试将所有这些 div 的数组存储在一个变量中，如下所示:

var agents = $( ".tooltipBox" );

但是，当我现在想使用那个数组时，它是未定义的。当我自己测试选择器时(就像简单地通过 alert()-ing 一样)，它确实有效。 这里有什么问题？

这是使用选择器的地方:

    $( "#runSimBtn" ).click(function runSimulation() {
        $( "#lContent h2" ).text("Simulation in progress...");

        var agents = $( "div.tooltipBox" );
        var falloutTimes = $( ".rFO" );

        var i, j = 0;

        for(i = 0, j = 0; i < agents.length, j < falloutTimes.length; i++, j++) {
            var ttl = falloutTimes[j].value;

            if((ttl != undefined) && (ttl != 999)) {
                setTimeout(function() {
                    agents[i].animate({ backgroundColor: "#FF0000" }, 500);
                }, ttl*1000);
            } else {
                continue;
            }
        }
    });

还尝试了浏览器控制台 (Firefox) 中的选择器，而且我可以选择 div，但是只要我想将选择(即使是单个 div)存储到变量，它返回未定义。

提前致谢...

Answer 1

正如我在评论中指出的那样，在循环中使用闭包变量是一个问题。

尝试

$("#runSimBtn").click(function runSimulation() {
    $("#lContent h2").text("Simulation in progress...");

    var agents = $("div.tooltipBox");
    var falloutTimes = $(".rFO");

    var i, j = 0;

    for (i = 0, j = 0; i < agents.length, j < falloutTimes.length; i++, j++) {
        var ttl = falloutTimes[j].value;

        if ((ttl != undefined) && (ttl != 999)) {
            (function (i, ttl) {
                setTimeout(function () {
                    agents[i].animate({
                        backgroundColor: "#FF0000"
                    }, 500);
                }, ttl * 1000);
            })(i, ttl);
        } else {
            continue;
        }
    }
});