For循环中的jQuery闭包[重复]答案

【问题标题】：jQuery Closure in For Loop [duplicate]For循环中的jQuery闭包[重复]
【发布时间】：2018-12-26 23:26:36
【问题描述】：

我熟悉 JavaScript 闭包。几年前，我在自己的项目上工作时发现了关闭问题。我还在面试候选人时加入了著名的 for-loop-button 问题。

现在，我用 jQuery 被问到这个问题。而且我一辈子也解决不了这个问题。

$(document).ready( function() {
  var buttons = $('button');

  for( var i = 0; i < buttons.length; ++i ) {
    buttons.eq(i).click(
        // ONLY EDIT THE CODE BELOW THIS LINE
        function() {
            $('ul').append('<li>' + i + '</li>')
        }
        // ONLY EDIT THE CODE ABOVE THIS LINE
    );
  }
});

有谁知道如何在约束范围内创建必要的闭包？

我尝试将匿名函数包装在括号中，返回内部函数等。没有任何效果。

https://jsfiddle.net/hmw0gk4c/791/

谢谢。

【问题讨论】：

不幸的是，问题已关闭，因此我无法发布答案。问题是您需要通过父函数的范围将索引i 作为参数传递；子函数可以是匿名的。这是一个有效的小提琴：jsfiddle.net/hmw0gk4c/867
我的 'i' 使用了错误的功能。
我不同意这个问题已经在其他地方得到了回答。如果我能找到答案，我就不会问了。这个特殊问题需要在 for 循环中编码解决方案。类似的问题提供了一种在 for 循环之外调用函数的解决方案。
谢谢大家！
另外，关于“已经回答”，顶部链接的问题是针对 vanilla JS 的。这个问题涉及 jQuery，它需要稍微不同的语法。

标签： javascript jquery closures

【解决方案1】：

这对我有用：

$(document).ready( function() {
  var buttons = $('button');
  for( var i = 0; i < buttons.length; ++i ) {
    buttons.eq(i).click(
      // ONLY EDIT THE CODE BELOW THIS LINE
      (function(y) {
        return (function() {
          $('ul').append('<li>' + y + '</li>')
        });
      })(i)
      // ONLY EDIT THE CODE ABOVE THIS LINE
    );
  }
});

【讨论】：

双括号。没试过。有用。谢谢。我给你检查（如果可以的话）不要创建一个新的 var。
括号不是使这个答案成为解决方案的原因；相反，它是通过父函数的范围传递索引i（作为y 参数），使其可用于子函数的范围。

【解决方案2】：

这就是你所追求的吗？

$(document).ready( function() {
	var buttons = $('button');

	for( var i = 0; i < buttons.length; ++i ) {
		buttons.eq(i).click(
			// ONLY EDIT THE CODE BELOW THIS LINE
			return (function() {
				$('ul').append('<li>' + i + '</li>')
			})();
			// ONLY EDIT THE CODE ABOVE THIS LINE
		);
	}
});

【讨论】：

这个答案适用于 vanilla JS。但是您编写的代码在“点击”函数中。所以答案需要是一个对象/函数，而不是一个语句。

【解决方案3】：

这就是诀窍：

$(document).ready( function() {
  var buttons = $('button');

  for( var i = 0; i < buttons.length; ++i ) {
    buttons.eq(i).click(
        // ONLY EDIT THE CODE BELOW THIS LINE
        function() { 
                var i2 = i + 1; 
                return function() {
                    $('ul').append('<li>' + i2 + '</li>');
                }
            }()
        // ONLY EDIT THE CODE ABOVE THIS LINE
    );
  }
});

【讨论】：

我发誓，我试过这个。现在可以了。但当时没有。