代码之家 › 专栏 › 技术社区 › kevzettler

在这个简单的闭幕式上我做错了什么?

closures javascript-events javascript

kevzettler · 技术社区 · 16 年前

可能是睡眠不足,但我不明白为什么这不起作用。我希望onclick从创建元素并应用事件处理程序的for循环返回i的值。把它放在一个闭包中,它仍然在转动迭代器的最大数目。

window.onload = function(){
  var arbitrary_amount = 100;
  var the_list = document.getElementsByTagName('ul')[0];

  for(var i = 0; i < arbitrary_amount; i++){
    var natural_index = i + 1;
    var list_item = document.createElement('li');
    var inner_link = document.createElement('a');
    inner_link.setAttribute('href', '#');
    inner_link.innerHTML = "Link "+natural_index;

    inner_link.onclick = function(){
      return function(link_num){
        alert('You clicked link '+link_num);
      }(i);
    };

    list_item.appendChild(inner_link);
    the_list.appendChild(list_item);
  }


};

5 回复 | 直到 13 年前

spatel 16 年前

你使用闭包的方式不对……我不能给你一个古鲁式的答案,关于实际发生的事情,但这里有一个有效的(没有测试它)闭包:

inner_link.onclick = (function(link_num){
   return function(){
       alert('You clicked link '+link_num);
   };
})(i);

mck89 16 年前

您可以尝试:

window.onload = function(){
  var arbitrary_amount = 100;
  var the_list = document.getElementsByTagName('ul')[0];

  for(var i = 0; i < arbitrary_amount; i++){
    (function(){var natural_index = i + 1;
    var list_item = document.createElement('li');
    var inner_link = document.createElement('a');
    inner_link.setAttribute('href', '#');
    inner_link.innerHTML = "Link "+natural_index;

    inner_link.onclick = function(){
      return function(link_num){
        alert('You clicked link '+link_num);
      }(i);
    };

    list_item.appendChild(inner_link);
    the_list.appendChild(list_item);})();
  }


};

Anurag 16 年前

这是因为您为onclick处理程序创建的每个闭包共享相同的环境。当 onclick 执行回调函数,每个函数都引用 i .

已经有了各种各样的解决方案,所以我不会在这里重复它,但是我们的想法是创建不共享同一环境的额外闭包。

这是一个常见的错误。结帐 MDC article 了解更多信息。

Charles Anderson 16 年前

在火狐3.5.5和Chrome4.0.249.64中,您的代码对我来说是正确的。

jjpcondor 13 年前

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>


<title>Just testing</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


</head>
<body>



<div id="test1">
Testing
</div>




<script type="text/javascript">


//  self-invoking function


(function makeHR(){
      var newHR = document.createElement('hr');
      document.getElementById('test1').appendChild(newHR);
})();





function makeLink(j){


      var link =document.createElement("a");


  link.innerHTML ="<br>Link test " +j;


  link.setAttribute('href', '#');

  link.onclick = (function(link_num){


   return function(){


   alert('You clicked link '+link_num);

   };


  })(j);

  document.body.appendChild(link);
}


for (var i=1; i<4; i++) {

   makeLink(i);

}


</script>


</body>

</html>