js的一些小知识的积累

标签：

今天在写一个JavaScript的demo----选项卡时遇到了一些问题，现记录如下：
（1）首先我发现在想定位到页面中的类是、时，我自然而然地想到了document.getElementsClassName(‘box‘);
但是我发现编辑器的高亮并没有显示，不像是document.getElementById的高亮，然后百度了一下，发现这种用法并没有提供支持，因为IE不支持

 （2）在写一个for循环的时候，并没有像我设想的那样：
    for(var i=0;i<li.length;i++){
     
           li[i].onmouseover = function(){
                 for(var j=0;j<li.length;j++){
                     li[j].className = ‘link‘;
                     box[j].style.display = ‘none‘;
                 }
               
                 box[i].style.display = ‘block‘;    
                this.className = ‘active‘;

           };

      }

      如上，我希望想c++或者其他的语言那样，通过定义定义两层for循环来定义新的box，结果编译并没有通过

     为了探求原因，我把外层for循环写成如下：

        for(var i=0;i<li.length;i++){
            alert(i);
      }

      这样确实是从0,1,2,3这样的顺序打印的，说明for循环确实是这样执行的，但是以如下的方式进行执行的话：
        for(var i=0;i<li.length;i++){
           li[i].index = i;   //需要对li定义一个index属性，否则无法将每一个index付给后面的box
           li[i].onmouseover = function(){
                 for(var j=0;j<li.length;j++){
                     li[j].className = ‘link‘;
                     box[j].style.display = ‘none‘;
                 }
                 alert(i);  
             
           };
      }

      像这样进行打印之后，发现打印出来的i都是li.length。之后才发现这个alert(i)是放在onmouseover事件里面的，并不是直接执行的
      所以在执行onmouseover时，外层循环已经执行完了，当然每次打印出来的i值就是最终的i值

      所以为了避免这样的错误，应该改成如下这样：
        for(var i=0;i<li.length;i++){
           li[i].index = i;   //需要对li定义一个index属性，否则无法将每一个index付给后面的box
           li[i].onmouseover = function(){
                 for(var j=0;j<li.length;j++){
                     li[j].className = ‘link‘;
                     box[j].style.display = ‘none‘;
                 }
                box[this.index].style.display = ‘block‘;
                this.className = ‘active‘;

           };

      }

      看来好多细节还是要注意啊

js的一些小知识的积累

标签：

原文地址：http://my.oschina.net/sunshinewyf/blog/486033