闭包循环:绑定事件监听器时,循环中声明的变量未正确预置到处理函数中

Question

我正在编写自动化单元测试的记录功能.

html元素结构:

<li> 
  <strong>
  <ol>
<li>
  <strong>
  <ol>

我希望把它当我点击<strong>,在<ol>其下同样<li>可以切换.

码:

for(var i = 0, l = logSuites.length; i < l; i++) {
        var suite = logSuites[i];
        $("#tests").append('<li><strong>....</strong></li>');
        var suiteSl = $('#tests > li:nth-child(' + (i + 1) + ')');
        var caseli = "<li>...</li>...";
        ...
        suiteSl.append('<ol style="display:none">' + caseli + '</ol>');
        var caseLiSl = suiteSl.children('ol');
        var toggleCases = function() {
            caseLiSl.toggle();
        };
        suiteSl.children('strong').bind('click', toggleCases);
    }

问题是每次事件被触发,最后一次<ol>被切换.. caseLiSl函数中的变量toggleCases总是最后一次在for循环中结算

Answer 1

这是一个更常见的问题.我们在循环中使用闭包(for或while),它始终保持增量的最后一个值.

答案可以在这个问题中找到:JavaScript不支持使用局部变量的闭包吗？