如何用闭包处理这个问题

<html><head><title></title>
<script type="text/javascript">
function $(elem){
return document.getElementById(elem);
}
var id=0;function addDiv()
{  
    var text="testtestetsetstsetstst";
    var div=$("div");
    var divChild=document.createElement("div");
     div.appendChild(divChild);
    divChild.id="div"+id;
     divChild.innerHTML="<input type='text'  style='color:#f00' id='row'"+id+">"+text; 
   
    divChild.onclick=function()
    { 
      (function(){
      
       var d=id;
      $("div"+id).onclick=function(){
       alert(d);
       }
      })()
                  
    }
    id++;        
}</script>
</head><body>
<div id="div" style="background:#000;color:#fff;height:200px;width:300px"></div>
<input type="button" value="click" onclick="addDiv();">
</body></html>
我想 每次单击一个行时， 弹出这个行的行号  ，但是 由于闭包问题 ，始终是最后以行的行号，请高手解决一下。

解决方案 »

  1.   

          var d=id;
    divChild.onclick=function() 
        { 
     
          
     
          $("div"+d).onclick=function(){ 
          alert(d); 
          } 
                      
        } 
        id++;     
      

  2.   


    <html> <head> <title> </title> 
    <script type="text/javascript"> 
    function $(elem){ 
    return document.getElementById(elem); 
    } 
    var id=0; function addDiv() 
    {  
        var text="testtestetsetstsetstst"; 
        var div=$("div"); 
        var divChild=document.createElement("div"); 
        div.appendChild(divChild); 
        divChild.id="div"+id; 
        divChild.innerHTML=" <input type='text'  style='color:#f00' id='row'"+id+">"+text; 
      
        divChild.onclick=function(ids){
    return function(){
    alert(ids);
    }
    }(id)

        id++;        
    } </script> 
    </head> <body> 
    <div id="div" style="background:#000;color:#fff;height:200px;width:300px"> </div> 
    <input type="button" value="click" onclick="addDiv();"> 
    </body> </html> 
      

  3.   

      var d=id
        divChild.onclick=function() 
        { 
          
          alert(d); 
                      
        } 
        id++; 
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
    <script type="text/javascript"> 
    function $(elem){ 
    return document.getElementById(elem); 
    } 
    var id=0; function addDiv() 
    {  
        var text="testtestetsetstsetstst"; 
        var div=$("div"); 
        var divChild=document.createElement("div"); 
        div.appendChild(divChild); 
        divChild.id="div"+id; 
        divChild.innerHTML=" <input type='text'  style='color:#f00' id='row'"+id+">"+text; 
      var d=id//在这里d就是闭包
        divChild.onclick=function() 
        { 
          
          alert(d); 
                      
        } 
        id++;        
    } </script> 
    </head> <body> 
    <div id="div" style="background:#000;color:#fff;height:200px;width:300px"> </div> 
    <input type="button" value="click" onclick="addDiv();"> 
    </body> 
    </html>