javascript - 循环和静态数字

Question

我有一个循环来运行我的按钮以使其处于悬停状态，但我似乎不知道如何将函数内的“i”修复为循环时。好的，这是解释我想要实现的目标的一种糟糕方式，也许代码会更清晰。

for ( i = 1; i < 4; i++ ) {
  $( '#buttons #'+i ).hover( function() {
	$( this ).text( i );
  }, function() {
	$( this ).text( 'Button' );
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="buttons">
  <h1 id="1">Button</h1>
  <h1 id="2">Button</h1>
  <h1 id="3">Button</h1>
</div>

每个按钮的悬停状态应该分别显示1、2、3。

Answer 1

如果您想以与当前代码类似的方式执行此操作，那将非常简单。只需在循环中调用一个函数，将i 变量传递给它，然后在该函数内设置hover() 回调。您的代码唯一的变化是函数调用和函数定义:

for ( i = 1; i < 4; i++ ) {
    setupHover( i );
}

function setupHover( i ) {
  $( '#buttons #' + i ).hover( function() {
	$( this ).text( i );
  }, function() {
	$( this ).text( 'Button' );
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="buttons">
  <h1 id="1">Button</h1>
  <h1 id="2">Button</h1>
  <h1 id="3">Button</h1>
</div>

为什么这个在原来的地方不起作用？请注意，在循环运行时不会调用两个 hover() 回调。当您将鼠标悬停在元素上时，它们将被称为 later。

所以 for 循环的原始版本已经运行完成，远早于 hover() 回调被调用以响应鼠标移动。在这些回调运行之前，i 变量的最终值为 4。

但是，通过在循环内调用函数并将 i 传递给该函数，被调用函数会捕获对您传递的变量的引用。请注意 i setupHover() 函数内部是一个独立于 for 循环中的 i 的变量。它具有相同的名称只是巧合，但它确实是一个单独的变量，对于每次函数调用都是唯一的。

阅读“JavaScript 闭包”了解更多信息。

您也可以通过其他方式做同样的事情，例如另一个答案中的技术，其中一个函数返回另一个函数。在某些情况下，这是一种有用的方法，但如果您只需要一个闭包，通常就有些矫枉过正了。

任何 函数调用都可以创建一个闭包，因此您唯一需要的就是用函数调用简单地替换循环体——在我的示例中是循环外的命名函数，或者正如您在评论中指出的那样，循环中有一个名为 inline 的匿名函数。这是调用创建闭包的函数的行为，无论您以何种方式定义和调用函数。