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

Question

我正在为自动化单元测试编写日志记录功能。

html元素结构：

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

我想在单击<strong> （在相同<li>下的<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> 。.函数toggleCases的变量caseLiSl始终是它在for循环中的最后一次稳定时间for

Answer 1

这是一个更常见的问题。 我们在循环中使用闭包（持续或持续），它始终保留增量的最后一个值。

可以在以下问题中找到答案： JavaScript是否不支持使用局部变量的闭包？

Answer 2

我想你应该做

suiteSl.children('strong').bind('click', function(){
   $(this).children('ol').toggle();
});

通过这种方式， this变量引用了clicked元素，而您仅切换了它的直接<ol>子元素

Answer 3

这又是循环问题中通常的闭合。

您可能应该阅读以下内容： http : //www.mennovanslooten.nl/blog/post/62