js進(jìn)階篇最后的編程挑戰(zhàn)為什么運(yùn)行不了
本來(lái)是已經(jīng)完成的了，完成后覺(jué)得可以簡(jiǎn)單一點(diǎn)，于是就換了一些js代碼。
var p =document.getElementsByTagName("p");
? ? var li=document.getElementsByTagName("li");
? ??
? ? for(var i=0;i<3;i++){
? ? ? ? li[i].onmouseover=function(){
? ? ? ? p[i].style.display="block";
? ? ? ? li[i].style.borderTop="2px red solid";
? ? ? ? li[i].style.borderBottom="2px white solid";
? ? ? ? }
? ? ? ? li[i].onmouseout=function(){
? ? ? ? p[i].style.display="none";
? ? ? ? li[i].style.borderTop="black 1px solid";
? ? ? ? li[i].style.borderBottom="1px blank solid";
? ? ? ? }
? ? }
主要就這一塊，就換了這一塊，其他應(yīng)該沒(méi)啥問(wèn)題。為什么就運(yùn)行不了呢，求大牛指導(dǎo)，下面是完整的代碼
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實(shí)踐題 - 選項(xiàng)卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */ ?
? ? ul{
? ? ? ? list-style-type:none;
? ? ? ? position:relative;
? ? ? ? z-index:100;
? ? }
? ? li{
? ? ? ? border:1px solid ;
? ? ? ? width:60px;
? ? ? ? padding:5px;
? ? ? ? margin:0px 3px;
? ? ? ? text-align:center;
? ? ? ? float:right;
? ? }
? ? p{
? ? ? ? width:187.5px;
? ? ? ? float:right;
? ? ? ? border:1px solid blue;
? ? ? ? padding:20px;
? ? ? ? margin-top:0px;
? ? ? ? display:none;
? ? ? ? border-top:2px solid red;
? ? ? ? position:absolute;
? ? ? ? right:83px;
? ? ? ? top:46px;
? ? }
? ? div{
? ? ? ? width:280px;
? ? }
? ? ? ?
? ? </style>
? ? <script type="text/javascript">
? ? var p =document.getElementsByTagName("p");
? ? var li=document.getElementsByTagName("li");
? ??
? ? for(var i=0;i<3;i++){
? ? ? ? li[i].onmouseover=function(){
? ? ? ? p[i].style.display="block";
? ? ? ? li[i].style.borderTop="2px red solid";
? ? ? ? li[i].style.borderBottom="2px white solid";
? ? ? ? }
? ? ? ? li[i].onmouseout=function(){
? ? ? ? p[i].style.display="none";
? ? ? ? li[i].style.borderTop="black 1px solid";
? ? ? ? li[i].style.borderBottom="1px blank solid";
? ? ? ? }
? ? }
? ??
? ??
? ? // JS實(shí)現(xiàn)選項(xiàng)卡切換
? ??
? ??
? ? </script>
?
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div>
<ul>
? ? <li>房產(chǎn)</li>
? ? <li>家居</li>
? ? <li>二手房</li>
</ul>
<p>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居
? ? 200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)
? ? 北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平
? ? 京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房</p>
<p>40平出租屋大改造 美少女的混搭小窩
? ? ?經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生
? ? ?新中式的酷色溫情 66平撞色活潑家居
? ? ?瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</p>
<p>
? ? 通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩
? ? ?西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)
? ? ?黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!
? ? ?獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</p>
</div>
?
</body> ? ??
</html> ?
2016-11-13
代碼：
for(var?i=0;i<3;i++){ ????li[i].index=i; ????li[i].onmouseover=function(){ ????????p[this.index].style.display="block"; ????????li[this.index].style.borderTop="2px?red?solid"; ????????li[this.index].style.borderBottom="2px?white?solid"; ????} ????li[i].onmouseout=function(){ ????????p[this.index].style.display="none"; ????????li[this.index].style.borderTop="black?1px?solid"; ????????li[this.index].style.borderBottom="1px?blank?solid"; ????} }2016-11-13
因?yàn)轫?yè)面加載完的時(shí)候已經(jīng)for循環(huán)完畢，而事件還沒(méi)觸發(fā)，因此i值在觸發(fā)事件的時(shí)候已經(jīng)是定值，這里是3，所以無(wú)論li[3]還是p[3]都是不存在的，這里要用每一個(gè)li（li[i])的index屬性來(lái)保存對(duì)應(yīng)的每一個(gè)i，事件函數(shù)內(nèi)再去調(diào)用