javascript - 如何将变量按值传递给匿名 JavaScript 函数？

Question

目标

我想动态地将事件处理程序分配给整个站点页面上的某些 div。

我的方法

我使用 jQuery 将匿名函数绑定(bind)为选定 div 事件的处理程序。

问题

该代码迭代 div 名称和关联 URL 的数组。 div 名称用于设置绑定(bind)目标，即将此事件处理程序附加到此 div 事件。

虽然事件处理程序已成功绑定(bind)到每个 div 事件，但这些事件处理程序触发的操作仅针对数组中的最后一项。

所以我们的想法是，如果用户将鼠标悬停在给定的 div 上，它应该为该 div 运行滑出动画。但相反，将鼠标悬停在 div1 (rangeTabAll) 上会触发 div4 (rangeTabThm) 的滑出动画。 div 2、3 等也是如此。顺序并不重要。更改数组元素，事件将始终针对数组中的最后一个元素 div4。

我的代码 - (使用 jQuery)

var curTab, curDiv;
var inlineRangeNavUrls=[['rangeTabAll','range_all.html'],['rangeTabRem','range_remedial.html'],
                ['rangeTabGym','range_gym.html'],['rangeTabThm','range_thermal.html']];
        for (var i=0;i<inlineRangeNavUrls.length;i++)
        {
            curTab=(inlineRangeNavUrls[i][0]).toString();
            curDiv='#' + curTab;
            if  ($(curDiv).length)
            {
                $(curDiv).bind("mouseover", function(){showHideRangeSlidingTabs(curTab, true);} );
                $(curDiv).bind("mouseout", function(){showHideRangeSlidingTabs(curTab, false);} );
            }
        }

我的理论

我要么没有看到明显的语法错误，要么是引用传递问题。 最初我有以下语句来设置 curTab 的值:

curTab=inlineRangeNavUrls[i][0];

因此，当问题发生时，我认为当我更改(通过 for 循环迭代)对 curTab 的引用时，我实际上是将所有以前的匿名函数事件处理程序的引用更改为新的 curTab值也是如此......这就是为什么事件处理程序总是以最后一个 div 为目标。

所以我真正需要做的是将 curTab 值 传递给匿名函数事件处理程序，而不是 curTab 对象 引用。

所以我想:

curTab=(inlineRangeNavUrls[i][0]).toString();

可以解决问题，但事实并非如此。同样的交易。很明显，我缺少一些有关该问题的关键知识，而且可能是非常基本的知识。谢谢。

Answer 1

您需要在每次循环时创建一个新变量，以便在您为事件处理程序创建的闭包中捕获该变量。

但是，仅将变量声明移动到循环中并不能实现此目的，因为 JavaScript doesn't introduce a new scope for arbitrary blocks .

强制引入新作用域的一种简单方法是使用另一个匿名函数:

for (var i=0;i<inlineRangeNavUrls.length;i++)
{
  curDiv='#' + inlineRangeNavUrls[i][1];
  if ($(curDiv).length)
  {
    (function(curTab)
    {
      $(curDiv).bind("mouseover", function(){showHideRangeSlidingTabs(curTab, true);} );
      $(curDiv).bind("mouseout", function(){showHideRangeSlidingTabs(curTab, false);} );
    })(inlineRangeNavUrls[i][0]); // pass as argument to anonymous function - this will introduce a new scope
  }
}

As Jason suggests ，您实际上可以使用 jQuery 的内置 hover() 来清理这个问题。功能:

for (var i=0;i<inlineRangeNavUrls.length;i++)
{
  (function(curTab) // introduce a new scope
  {
  $('#' + inlineRangeNavUrls[i][1])
    .hover(
      function(){showHideRangeSlidingTabs(curTab, true);},
      function(){showHideRangeSlidingTabs(curTab, false);} 
    );
  // establish per-loop variable by passsing as argument to anonymous function
  })(inlineRangeNavUrls[i][0]); 
}