<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title>實(shí)踐題 - 選項(xiàng)卡</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實(shí)現(xiàn)選項(xiàng)卡切換? ? 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"); //這也會(huì)報(bào)下面一樣的錯(cuò)。this.addClass("current");//erro:Uncaught TypeError: Cannot read property 'addClass' of undefined? ? ?//麻煩各位老師能好好解釋下原理，有空也可以說說jQuer封裝的addClass為什么能直接打點(diǎn)號(hào)調(diào)用。怎么實(shí)現(xiàn)的呢? ? ? ? ? ? }? ? ? ? ? ?? ? ? ? }? ? ?function addClass(clas){//我是想模仿jQuer一樣封裝添加樣式類名的方法 想直接打點(diǎn)號(hào)直接調(diào)用。? ? ?if(this.className.indexOf(clas)<0){//先判斷，以防重復(fù)加同樣的類名? ? ?//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平出租屋大改造 美少女的混搭小窩? ? ?經(jīng)典清新簡(jiǎn)歐愛家 90平老房煥發(fā)新生? ? ?新中式的酷色溫情 66平撞色活潑家居? ? ?瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)? ? </div>? ? <div style="display:none">? ? ? ? 275萬購(gòu)昌平鄰鐵三居 總價(jià)20萬買一居? ? 200萬內(nèi)購(gòu)五環(huán)三居 140萬安家東三環(huán)? ? 北京首現(xiàn)零首付樓盤 53萬購(gòu)東5環(huán)50平? ? 京樓盤直降5000 中信府 公園樓王現(xiàn)房? ? </div>? ? <div style="display:none">? ? ?通州豪華3居260萬 二環(huán)稀缺2居250w甩? ? ?西3環(huán)通透2居290萬 130萬2居限量搶購(gòu)? ? ?黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!? ? ?獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價(jià)248萬? ? </div>?</body></html>以上代碼可以直接復(fù)制運(yùn)行的。我想表達(dá)的都已經(jīng)弄到注釋中了。
原生js代碼報(bào)錯(cuò)問題
慕前端8664132
2017-05-05 23:42:32
