js中不能给对象赋onclick事件

Question

我写了这样一段代码：function showClick()
  {
     var img=$("navi").getElementsByTagName("img");
  for(gi=0;gi<img.length;gi++)
  { 
    img[gi].onclick=function ()
     {
    
     img[gi].className="hidden";
     if(gi==img.length-1)
               {gi=-1;}
     
     img[gi+1].className+=" nxt";
     init();
  }
     img[gi].onmouseover=function(){this.className="normal";}
     img[gi].onmouseout=function(){this.className="hidden";}
  }
  }代码如上。我做一个遍历。对每个图片，如果产生点击的操作。就给他的CLASSNAME赋值。以便下一步操作。
但是我在FF下发现它提示img[gi]未定义.在IE中不能处理点击事件。却能处理onmouseover   onmouseout事件。这个是为什么？ 

Answer 1

你可以用jQuery的$("#id").bind("click",function(){});对他绑定一个click事件！

Answer 2

function showClick() 
{ 
  var img=$("navi").getElementsByTagName("img"); 
  for(gi=0;gi <img.length;gi++) 
  { 
    img[gi].onclick=(function(n){
     return function()
    {
    var img=$("navi").getElementsByTagName("img"); 
    img[n].className="hidden"; 
    if(n==img.length-1) n=-1;
    img[n+1].className+=" nxt"; 
    init(); 
    }
})(gi);
    img[gi].onmouseover=function(){this.className="normal";} 
    img[gi].onmouseout=function(){this.className="hidden";} 
  } 
} 

Answer 3

弄清楚img[gi]未定义的原因是gi是局部变量。楼上使用匿名函数可以解决这个问题

Answer 4

function showClick() { var img=$("navi").getElementsByTagName("img"); for(gi=0;gi <img.length;gi++) { img[gi].onclick=(function(n){ return function() { var img=$("navi").getElementsByTagName("img"); img[n].className="hidden"; if(n==img.length-1) n=-1; img[n+1].className+=" nxt"; init(); } })(gi); img[gi].onmouseover=function(){this.className="normal";} img[gi].onmouseout=function(){this.className="hidden";} } }