                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /DOM事件探秘

index=as[i].num-1?

為什么鼠標(biāo)滑過的時候index=as[i].num-1?是什么作用？求解答謝謝

大GIGI

2016-08-18

源自：DOM事件探秘 5-1

關(guān)注問題我要回答

973

操作

收起

1 回答

Rimas 回答被采納 +3 積分
2016-08-18

<!doctype?html>
<html>
<head>
<meta?charset="UTF-8">
<title>下拉菜單</title>
<style?type="text/css">
body,ul,li{?margin:0;?padding:0;?font-size:13px;}
ul,li{list-style:none;}
#divselect{width:186px;?margin:80px?auto;?position:relative;?z-index:10000;}
#divselect?cite{width:150px;?height:24px;line-height:24px;?display:block;?color:#807a62;?cursor:pointer;font-style:normal;
padding-left:4px;?padding-right:30px;?border:1px?solid?#333333;?
/*background:url(xjt.png)?no-repeat?right?center;*/}
#divselect?ul{width:184px;border:1px?solid?#333333;?background-color:#ffffff;?position:absolute;?z-index:20000;?margin-top:-1px;?display:none;}
#divselect?ul?li{height:24px;?line-height:24px;}
#divselect?ul?li?a{display:block;?height:24px;?color:#333333;?text-decoration:none;?padding-left:10px;?padding-right:10px;}
</style>
<script?type="text/javascript">
window.onload=function(){
????var?box=document.getElementById('divselect'),
????????title=box.getElementsByTagName('cite')[0],
??????menu=box.getElementsByTagName('ul')[0],
??????as=box.getElementsByTagName('a'),
????????index=-1;
???
????//?點擊三角時
????title.onclick=function(event){
??????event?=?event||window.event;
??????menu.style.display?=?'block';
??????if(event.stopPropagation){
????????event.stopPropagation();?
??????}else{
????????event.cancelBubble?=?true;?????
???????????}
????document.onkeyup?=?function(event){
????event?=?event||window.event;
????if(event.keyCode==40){
??????index++;
??????if(index>=as.length)?index=0;
??????for(var?i=0;?i<as.length;i++){
????????as[i].style.background?=?'#fff';
??????}
??????as[index].style.background?=?'#ccc';
????}?
????if(event.keyCode==38){
??????index--;
??????if(index<0)?index=as.length-1;
??????for(var?i=0;?i<as.length;i++){
????????as[i].style.background?=?'#fff';
??????}
??????as[index].style.background?=?'#ccc';
????}
????if(event.keyCode==13){
??????for(var?i=0;?i<as.length;i++){
????????as[i].style.background?=?'#fff';
??????}
??????title.innerHTML?=?as[index].innerHTML;
??????menu.style.display?=?'none';
????}??
????}
????}??
????
???//?滑過滑過、離開、點擊每個選項時
??????for(var?i=0;?i<as.length;?i++){
???????as[i].num?=?i
???????console.log(as[i].num);
???????as[i].onmouseover?=?function(){
???????this.style.background?=?'#ccc'
????//提問內(nèi)容：
???????index?=?as[i].num-1;???
???????}
?????as[i].onmouseout?=?function(){
??????this.style.background?=?'#fff'???
?????}
?????as[i].onclick?=?function(event){
??????event?=?event||window.event;
??????if(event.stopPropagation){
?????????event.stopPropagation();?
??????}else{
?????????event.cancelBubble?=?true;?????
??????}
??????menu.style.display?=?'none';
??????title.innerHTML?=?this.innerHTML;??
?????}??
????}
???//?點擊頁面空白處時
??????document.onclick?=?function(){
?????menu.style.display?=?'none';?
????}
?}
</script>
</head>
<body>
??<div?id="divselect">
??????<cite>請選擇分類</cite>
??????<ul>
?????????<li?id="li"><a?href="javascript:;"?selectid="1">ASP開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="2">.NET開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="3">PHP開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="4">Javascript開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="5">Java特效</a></li>
??????</ul>
????</div>
</body>
</html>

你說的是上面這個代碼吧？？

你把這句注釋了，你會發(fā)現(xiàn)依然可以很好的運行。

而且我發(fā)現(xiàn)，如果不注釋，運行的過程中，會報錯，很奇怪。如果知道后續(xù)我們繼續(xù)討論！