使用FOR循环绑定事件序列

海。 我试图使用javascript jQuery库将一系列事件绑定到几个div。 这是我想要做的。

屏幕上会有很多div，其中id为div1 div2 div3 … div10，依此类推。 然而，只有id为’div1’的第一个div将被隐藏所有其他div隐藏。 当用户将鼠标hover在div1上时，应该显示div2，当他将鼠标hover在div 2上时，应该显示div 3，这应该继续，直到最后一个div。

我设法使用jQueries下一个方法提出解决方案。

$('div').each(function(){ $(this).mouseover(function(){ $(this).next().show(); }); }); 

然而，因为我新学习javascript我想使用FOR循环重做它，它不会工作。

 for (var i=1; i<11; i++){ $('#div' + i).mouseover(function(){ $('#div' + (i+1)).show(); }); } 

经过一段时间的游戏后，我想，因为我正在创建一个新函数，所以’i’的值只在函数执行时解释，而不是在创建函数时解释。 有人可以向我解释如何避免这种陷阱，并使用javascripts FOR循环实现jQuery.next（）的function。 谢谢。

Answer 1

问题是所有div只有一个变量i ，而for循环末尾的值将是11.你能做的就像是

 for (var i=1; i<11; i++){ $('#div' + i).mouseover(function(){ var index_string = $(this).attr('id').substring(3), //return, say the string '6' index = parseInt(index_string, 10); //convert it to a number $('#div' + (index+1)).show(); }); } 

一种更复杂的方法，使用匿名函数存储索引：

 for (var i=1; i<11; i++){ (function() { var j = i; $('#div' + j).mouseover(function(){ $('#div' + (j+1)).show(); }); })(); } 

Answer 2

当你写这样的东西：

 for (var i = 1; i < 11; i++){ $('#div' + i).mouseover(function () { $('#div' + (i+1)).show(); }); } 

你在你创建的每10个函数中为i变量创建一个闭包，但只有i变量的一个副本，所有函数都看到相同的值（在这种情况下为11，因为这是结束循环的值） 。 它影响你有每个鼠标hover处理程序试图显示'＃div12'，我认为不存在。

如果你使用这样的东西它可以工作：

 for (var i = 1; i < 11; i++) { (function (j) { $('#div' + i).mouseover(function () { $('#div' + (j+1)).show(); }); }(i)); } 

在这个例子中，你将在每次迭代中创建一个新的变量j （通过创建并立即调用带有参数j的新函数，该函数将在该迭代中获取i的值），因此每个事件处理程序都可以拥有自己的版本正确的价值。

我这样说只是为了解释发生了什么，因为其他人已经提供了更好的解决方案。

Answer 3

 for (var i=1; i<4; i++){ (function(j){ $('#div' + j).mouseover(function(){ $(this).next().show(); }) }(i)); } 

Answer 4

如果您不需要（此）对象，您可以执行以下操作：

 for (var i=1; i<11; i++){ $('#div').mouseover(function(j, e){ $('#div' + (j+1)).show(); }.bind(null, i)); } 

如果你还需要（这个）对象呢

 for (var i=1; i<11; i++){ $('#div').mouseover(function(j, e){ $('#div' + (j+1)).show(); }.bind($('#div'), i)); }