为了账号安全,请及时绑定邮箱和手机立即绑定

原生js代码报错问题

原生js代码报错问题

慕前端8664132 2017-05-05 23:42:32
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>实践题 - 选项卡</title>    <style type="text/css">     /* CSS样式制作 */        .link-info{          color:green;          background:#ddd;          border:1px solid #ddd;          padding:2px 4px;          cursor:pointer;      } .current{background:red;color:#fff; }       .wrap-row{           padding-top:15px;       }    </style>    <script type="text/javascript">             // JS实现选项卡切换    window.onload=function(){        var btn=document.getElementsByClassName("link-info");        for(var i=0;i<btn.length;i++){                      btn[i].onclick=function(e){      var target=e.target.className;//target.className.addClass("current"); //这也会报下面一样的错。this.addClass("current");//erro:Uncaught TypeError: Cannot read property 'addClass' of undefined     //麻烦各位老师能好好解释下原理,有空也可以说说jQuer封装的addClass为什么能直接打点号调用。怎么实现的呢            }                   }     function addClass(clas){//我是想模仿jQuer一样封装添加样式类名的方法 想直接打点号直接调用。     if(this.className.indexOf(clas)<0){//先判断,以防重复加同样的类名     //var classing=classed.concat(" ");     return this.className+=""+clas;     }          }         }        </script> </head><body><!-- HTML页面布局 -->    <div>        <a class="link-info one">按钮1</a>        <a class="link-info two">按钮2</a>        <a class="link-info three">按钮3</a>    </div>    <div>         40平出租屋大改造 美少女的混搭小窝     经典清新简欧爱家 90平老房焕发新生     新中式的酷色温情 66平撞色活泼家居     瓷砖就像选好老婆 卫生间烟道的设计    </div>    <div style="display:none">        275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环    北京首现零首付楼盘 53万购东5环50平    京楼盘直降5000 中信府 公园楼王现房    </div>    <div style="display:none">     通州豪华3居260万 二环稀缺2居250w甩     西3环通透2居290万 130万2居限量抢购     黄城根小学学区仅260万 121平70万抛!     独家别墅280万 苏州桥2居优惠价248万    </div> </body></html>以上代码可以直接复制运行的。我想表达的都已经弄到注释中了。
查看完整描述

3 回答

?
侠客中的王者

TA贡献2条经验 获得超1个赞

首先this的指向就有误, jquery刚开始要调用构造函数生成jquery对象,然后它的链式调用每次都要返回this.

查看完整回答
1 反对 回复 2017-05-08
?
后知后觉88

TA贡献39条经验 获得超10个赞


首先  你没有引入jq文件  所有不能直接用 jq里边的方法  也就是addClass( )

还有就是 要转换成jq对象 才能用jq的方法  也就是$(this).addClass( )

做好这两步   不会报错了 

你说的想封装自己的jq方法  当然可以  慕课网有好多讲这个的视频  自己可以搜搜看看

查看完整回答
反对 回复 2017-05-07
  • 慕前端8664132
    慕前端8664132
    我的目的是用原生来封装一个属于自己的addClass 现在你能帮我解决这个bug吗??
  • 3 回答
  • 0 关注
  • 1408 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信