for循环中的Jquery .hover()：奇怪的范围问题

Question

我正在尝试编写一个系统，该系统将生成并填充一个表单，其中一些文本存储在数组中的多个对象中。

我循环遍历数组，然后通过描述中的行数添加一些中断，以便另外两列与每个组的第一行对齐。

所有文本都位于 3 个 div 之一中，这些 div 位于一堆带边框的其他 div 之上。这些画线以可视化表单框。

每次创建这些背景 div 时，我都会从 for 循环中给它一个类“i”。从而将它们全部分组到当前对象。这样，当我将鼠标悬停在任何一个框上时，它会将它们全部突出显示为一组。

我的问题是，当我将鼠标悬停在任何 div 上时，它说“i”等于 6。（我在数组中有 6 个项目，总共 0-5）。它应该回显 0-5，具体取决于绑定时循环中的“i”。

如果我将 .hover() 调用移动到一个单独的函数中（在 for 循环之外），然后在 setHover(i) 等相同的位置调用该函数；它的工作原理.....

这可能是非常明显的事情，但我真的对这种行为感到困惑。任何帮助将不胜感激。

for(i=0; i<g_workEntries.length; i++)
    {
        curEntry = g_workEntries[i];  //current object
        rowCount = curEntry.numRows;  // total number rows for this object

        //add the big block of description text
        $('#descriptionText').append('<div>'+curEntry.description+'</div><br/>');

         if(curEntry.price != null) 
         {  
            $('#priceText').append('$'+curEntry.price); //If there is a price add it
         }

        if(curEntry.workCode != null) 
        {
            $('#workCodesText').append(curEntry.workCode);//If there is a work id add it
        }

        for(x=0; x < rowCount; x++)
        {
            generateRow(''+i); //generate a background row (what the text sits on & gets highlited on hover).

            $('#priceText').append('<br/>');     //add a break for  the first lien & every subsequent line of the description.
            $('#workCodesText').append('<br/>'); 
        }


        console.log('added hover for: '+i); //<-- this works and says 0-5

        //////////THIS CAUSES THE ISSUE////////
        ///It always echos 6 whenever I hover
        ///It should be echoing 0-5 depending
        ///on what row group gets passed (i)

        $('.'+i).hover(
            function(){console.log(i+' ON');},
            function(){console.log(i+' OFF');}
        );
    }

Answer 1

这就是所谓的闭包。你应该将它封闭在另一个范围内：

for(var i =0 i<n;i++)
{

  (function(index){

    $('.'+index).hover(function(){
        console.log(index);
    })
  })(i)
}

编辑： 正如 Bill Criswell 指出的那样，由于您使用的是 jQuery，因此您可以使用 $.each 函数来包围范围以遍历数组而不是使用 for 语句：

$.each( g_workEntires, function( index, curEntry ){ ... });

发生的事情是循环在调用悬停函数回调之前很久就完成了。 在 javascript 中，变量具有函数作用域，而不是块作用域。 因此，当循环结束时，var i 的值 = 6，并在一段时间后调用悬停回调并找到值为 6 的 i 变量。