面向过程和面向对象的二级菜单转变

来源：互联网发布：轩墨宝宝知乎编辑：程序博客网时间：2024/05/21 17:52

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{margin: 0;padding: 0;list-style: none;}
           body{
               padding: 50px 300px;
           }
           #one li{
               width: 100px;
               height: 50px;
               float: left;
               line-height: 50px;
               text-align: center;
               /*margin-left: 5px;*/
               background: #1E90FF;
           }
           .two{
               display: none;
           }
       </style>
       <script type="text/javascript">
       //面向过程写法
//           window.onload=function(){
//               var oOne=document.getElementById('one');
//               var aLi=oOne.children;
//               var aUl=oOne.getElementsByTagName('ul');
//               for (var i=0;i<aLi.length;i++) {
//                   aLi[i].index=i;
//                   aLi[i].onmouseover=function(){
//                       this.style.backgroundColor='red';
//                       aUl[this.index].style.display='block'
//                   };
//                   aLi[i].onmouseout=function(){
//                       this.style.backgroundColor='#1E90FF';
//                       aUl[this.index].style.display='none'
//                   };
//               }
//           };

//面向对象写法
    //写面向对象的做法，先写面向过程再改写成面向对象三步曲 1对象实例 2原型添加属性 3构造方法函数里面尽量不要嵌套函数,主要主要改成this时是否同一个指向，不然的话就要改和转参数
           //对象实例
           window.onload=function(){
               var b1=new Hg();
               b1.init();
           }

           //原型添加属性
           function Hg(){
              this.oOne=document.getElementById('one');
               this.aLi=this.oOne.children;
               this.aUl=this.oOne.getElementsByTagName('ul');
           }

           //构造函数方法
           Hg.prototype.init=function(){
               var _this=this;
               for (var i=0;i<this.aLi.length;i++) {
                   this.aLi[i].index=i;
                   this.aLi[i].onmouseover=function(){
                       _this.aa(this);//this指向不对，传参数
                   };
                   this.aLi[i].onmouseout=function(){
                       _this.cc(this);//this指向不对，传参数
                   };
               }
           }

           Hg.prototype.aa=function(li){//this指向不对，传参数
               var _this=this;
               li.style.backgroundColor='red';
               _this.aUl[li.index].style.display='block'
           }

           Hg.prototype.cc=function(ul){//this指向不对，传参数
               var _this=this;
               ul.style.backgroundColor='#1E90FF';
               _this.aUl[ul.index].style.display='none'
           }

       </script>
   </head>
   <body>
       <ul id="one">
           <li>个数
               <ul class="two">
                   <li>个数</li>
                   <li>电饭锅</li>
                   <li>的人</li>
               </ul>
           </li>
           <li>时光隧道
               <ul class="two">
                   <li>个数</li>
                   <li>电饭锅</li>
                   <li>的人</li>
               </ul>
           </li>
           <li>而二哥
               <ul class="two">
                   <li>个数</li>
                   <li>电饭锅</li>
                   <li>的人</li>
               </ul>
           </li>
           <li>好地方
               <ul class="two">
                   <li>个数</li>
                   <li>电饭锅</li>
                   <li>的人</li>
               </ul>
           </li>
           <li>电饭锅
               <ul class="two">
                   <li>个数</li>
                   <li>电饭锅</li>
                   <li>的人</li>
               </ul>
           </li>
       </ul>
   </body>
</html>

阅读全文

0 0