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)
}

修改正如比尔·克里斯威尔指出的那样，既然你正在使用jQuery，你可以使用$ .each函数来封装范围来迭代数组而不是使用for语句：

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

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

for循环中的Jquery .hover（）：奇怪的范围问题

1 个答案: