作用域啊

上面的代码有问题
重新贴一下
<style type="text/css">
.ss{ height:20px; width:100px; background-color:#999900; padding:10px;}
</style>
<body>
<script>
var data = [
{txt:'111',menu:[{txt:'1111'}]},
{txt:'222',menu:[{txt:'2222'}]},
{txt:'333',menu:[{txt:'3333'}]},
{txt:'444',menu:[{txt:'4444'}]}
]function $(Id){return document.getElementById(Id);};function create(elm,parent,fn){
   var element = document.createElement(elm);
   fn&&fn(element);
   parent.appendChild(element);
};function cc(data){
for(var i=0;i<4;i++)
{
create('div',$('conter'),function(obj){
obj.className='ss';
obj.innerHTML=data[i].txt;
var f = i                         //在函数里面定义个变量，下面在这么写就可以了哈
obj.onclick = function(){aall(data[f].menu[0].txt)}
//obj.onclick = function(){aall(data[i].menu[0].txt)} //直接这么写就不行啊
})
}
}function aall(obj){
alert(obj)
}
</script>
<div id='conter'></div>
<input value='ss' type="button" onclick="cc(data)" />
</body>

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style type="text/css">
    .ss{ height:20px; width:100px; background-color:#999900; padding:10px;}
    </style>
    <body>
    <script>
    var data = [
    {txt:'111',menu:[{txt:'1111'}]},
    {txt:'222',menu:[{txt:'2222'}]},
    {txt:'333',menu:[{txt:'3333'}]},
    {txt:'444',menu:[{txt:'4444'}]}
    ]function $(Id){return document.getElementById(Id);};function create(elm,parent,fn){
       var element = document.createElement(elm);
       fn&&fn(element);
       parent.appendChild(element);
    };function cc(data){
        for(var i=0;i<4;i++)
        {
            create('div',$('conter'),function(obj){
            obj.className='ss';
            obj.innerHTML=data[i].txt;
            var f = i                         //在函数里面定义个变量，下面在这么写就可以了哈
            obj.onclick = function(){aall(data[f].menu[0].txt)}
            //obj.onclick = function(){aall(data[i].menu[0].txt)} //直接这么写就不行啊
            })
        }
    }function aall(obj){
    alert(obj)
    }
    </script> </HEAD> <BODY>
      
     <div id='conter'></div>
    <input value='ss' type="button" onclick="cc(data)" />
    </body>
    </HTML>
    老兄   ，你就少写了个j，该过来之后 ，两种用法都可以  呵呵
      

  2.   

    你这是闭包
    function(obj){
            obj.className='ss';
            obj.innerHTML=data[i].txt;
            var f = i                         //在函数里面定义个变量，下面在这么写就可以了哈
            obj.onclick = function(){aall(data[f].menu[0].txt)}
            //obj.onclick = function(){aall(data[i].menu[0].txt)} //直接这么写就不行啊
            }
    闭包的原因啊.
      

  3.   

    朋友我帮你这个函数稍微改了下，你看看
    function cc(data){
        for(var i=0;i<4;i++)
        {
            create('div',$('conter'),function(obj){
    obj.className='ss';
    obj.innerHTML=data[i].txt;
    var f = i                         //在函数里面定义个变量，下面在这么写就可以了哈
    //obj.onclick = function(){aall(data[f].menu[0].txt)}
    obj.onclick = function(i){
    //aall(data[i].menu[0].txt)
    return function(){
    alert(data[i].menu[0].txt);
    };
    }(i);//直接这么写就不行啊
            })
        }
    }
    =======================
    如果你不用f的话，可以采用必包来达到效果！
      

  4.   

    帮你简化一下
    function cc(){
        for(var i=0;i<4;i++)
        {
       var obj = $('conter').appendChild(document.createElement("div"));
       obj.innerHTML = i;
       (function(){
            var f = i;
             obj.onclick = function(){alert(f)}
       })()
        }
    }
      

  5.   

    关键就是
           (function(){
                   var f = i;
                obj.onclick = function(){alert(f)}
           })()这里的var f = i;
    其实跟
           (function(i){
    ....
    })(i)
    的效果是一样的