循环内的jquery函数不迭代答案

【问题标题】：jquery function within loop not iterating循环内的jquery函数不迭代
【发布时间】：2012-06-06 23:46:01
【问题描述】：

我的代码有问题，title 属性只显示16，而不是显示从1 到15 的所有值。为什么会这样，任何人都可以建议我做错了什么？？？

我的代码

 x=1;
 while(x <= 15)
 {
     $("td#id"+x).mouseover(function(x){
     $(this).attr('title', x)           
   });
   x++;
}

【问题讨论】：

这是更大脚本的一部分，表的列是动态生成的并分配了id，title属性将具有x的值，即迭代器，所以如果例如someval someval .... someval

【解决方案1】：

您作为事件处理程序提供给 jquery 的函数保留一个指向外部块的指针，该块在其中定义它及其（活动）变量。这就是闭包的工作原理。

所以当它执行时，x 是 15。

我知道大多数 javascript 开发人员不知道它是如何工作的，但这是一件非常有趣的事情：http://jibbering.com/faq/notes/closures/

编辑：我不会在这里添加我打算添加的常规修复，因为 Alnitak 在我面前指出，回调实际上在这种情况下完全没用;)

【讨论】：

【解决方案2】：

这是非常常见的“在回调中使用循环变量”问题。

当您使用 jQuery 时，最简单的修复是处理程序的 data 参数：

 var x=1;
 while (x <= 15) {
     $("td#id"+x).mouseover({ x: x }, function(ev) {
         this.title = ev.data.x;        
     });
     x++;
 }

也就是说，你为什么只在mouseover 函数中设置它？标题应该直接添加到元素中，只需一次：

for (var x = 1; x <= 15; ++x) {
    document.getElementById('id' + x).title = x;
}

在mouseover 处理程序中执行此操作实际上不会破坏任何内容，但这意味着您已经注册了一个事件处理程序，每次您从一个单元格移动到另一个单元格时都会一遍又一遍地调用（并更新 DOM） .

【讨论】：