JavaScript事件與例子（三）
阿新 • • 發佈：2022-04-29
兩個例子，好友選中效果和左側右側子選單
一、好友選中效果
可以通過設定屬性的方式判斷當前是否被選中，也可以通過獲取當前元素的顏色從而得知當前元素狀態是否被選中，從而進行操作
1.通過設定屬性的方式判斷選中的元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>好友選中</title> 6 <style> 7 *{ 8 margin:0px auto; 9 padding:0px; 10 } 11 #wai{ 12 height:400px; 13 width:200px; 14 margin-top:100px; 15 margin-left:100px; 16 } 17 .li{ 18 height:30px; 19 width:200px; 20 background-color:blue; 21 border:1px solid white; 22 text-align:center; 23 line-height:30px; 24 vertical-align:middle;} 25 26 </style> 27 </head> 28 29 <body> 30 <div id="wai"> 31 <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">風吹柳葉遮黃雀</div> 32 <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">薄翅不覺已落蟬</div> 33 <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">誰將新樽辭舊月</div> 34 <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">今月曾今朝故人</div> 35 </div> 36 </body> 37 </html> 38 <script> 39 //首先獲取到所有好友列表 40 var l=document.getElementsByClassName("li"); 41 //滑鼠單擊事件 42 function xuan(b){ 43 //遍歷陣列，設定屬性ys的值為0，顏色為藍 44 for(var i=0;i<l.length;i++){ 45 l[i].setAttribute("ys","0"); 46 l[i].style.backgroundColor="blue"; 47 } 48 //當前元素ys屬性值為1，顏色為紅 49 b.setAttribute("ys","1"); 50 b.style.backgroundColor="red"; 51 } 52 53 //滑鼠移上的效果 54 function bian(a){ 55 //遍歷陣列內容，只要ys屬性的值是0，顏色變為藍色 56 for(var i=0;i<l.length;i++){ 57 if(l[i].getAttribute("ys")=="0"){ 58 l[i].style.backgroundColor="blue"; 59 } 60 } 61 //獲取當前元素ys屬性值如為0，則顏色變為綠 62 if(a.getAttribute("ys")=="0"){ 63 a.style.backgroundColor="green"; 64 } 65 } 66 //滑鼠離開事件 67 function li(c){ 68 //如果當前元素ys值為0，顏色設為藍色 69 if(c.getAttribute("ys")=="0"){ 70 c.style.backgroundColor="blue"; 71 } 72 } 73 </script>
2.通過獲取當前元素顏色的方式判斷
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>好友選中</title> 6 <style> 7 *{ 8 margin:0px auto; 9 } 10 #wai{ 11 margin-top:100px; 12 margin-left:100px; 13 width:300px; 14 height:300px;} 15 .li{ 16 margin:1px; 17 background-color:white; 18 font-family:微軟雅黑; 19 font-size:16px; 20 text-align:center; 21 width:300px; 22 height:50px; 23 line-height:50px; 24 vertical-align:middle; 25 float:left;} 26 </style> 27 </head> 28 29 <body> 30 <div id="wai"> 31 <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">風吹柳葉遮黃雀</div> 32 <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">薄翅不覺已落蟬</div> 33 <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">誰將新樽辭舊月</div> 34 <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">今月曾經照古人</div> 35 </div> 36 </body> 37 </html> 38 <script> 39 //之前曾經用給每個div加id，然後函式傳回id的方式，錯誤，因為這樣函式寫在div傳回自己的用this，如果函式傳回的是下面的div的改變，可以嘗試用加div 40 41 //獲取所有列表好友到陣列 42 var z=document.getElementsByClassName('li'); 43 44 //滑鼠移上的效果 45 function yishang(s){ 46 //遍歷陣列，判斷每個顏色是綠色即移上狀態，則顏色設為白色即初始顏色，如果顏色是藍色即選中狀態，則跳出本次迴圈顏色依舊為藍色 47 48 for(i=0;i<z.length;i++){ 49 if(z[i].style.backgroundColor=="green"){ 50 z[i].style.backgroundColor="white"; 51 }else if(z[i].style.backgroundColor=="blue"){ 52 //跳出本次迴圈 53 continue; 54 } 55 //在判斷當前元素顏色是否是藍色即被選中狀態，是則跳出即狀態不變，否則顏色設為綠色即滑鼠移上的效果 56 if(s.style.backgroundColor=="blue"){ 57 continue; 58 }else{ 59 s.style.backgroundColor="green"; 60 } 61 /* 62 此方法原本作為對上面方法的優化，可以直接判斷現在的顏色如果是白色，則變為綠色，該方法的漏洞在於，當前沒有顏色可以獲取 63 如果使用該方法，應當在元素中內聯顏色 64 if(s.style.backgroundColor=="white"){ 65 s.style.backgroundColor="green"; 66 }e*/ 67 } 68 } 69 //滑鼠單擊事件，滑鼠單擊首先將所有元素設定為初始白色，然後當前顏色設為藍色 70 function dianJi(y){ 71 for(i=0;i<z.length;i++){ 72 z[i].style.backgroundColor="white"; 73 } 74 y.style.backgroundColor="blue"; 75 } 76 //滑鼠離開事件，滑鼠離開如果顏色是綠色即未被選中，則變為白色 77 function zou(z){ 78 if(z.style.backgroundColor=="green"){ 79 z.style.backgroundColor="white"; 80 } 81 } 82 </script>
使用這種方法，為何能夠獲取到當前元素顏色進行判斷？首先滑鼠移上，執行函式 yishang()，然後進for迴圈遍歷進行判斷，不符合判斷任何一種情況，則無操作，進行下一個判斷，如果當前元素顏色是被選中狀態則跳出，如果不是則設為綠色，第一個顏色就這樣賦值上了
這個問題我出錯的幾點需要注意：
1.在函式中，什麼時候用陣列元素的樣式，什麼時候用當前元素的樣式多次搞錯
2.判斷中判斷樣式是否是該顏色，一定要用==
二、左側右側子選單
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>子選單</title> 6 <style> 7 *{ 8 margin:0px auto; 9 padding:0px;} 10 #wai{ 11 margin-top:150px; 12 margin-left:200px; 13 height:300px; 14 width:100px;} 15 .li{ 16 height:30px; 17 width:100px; 18 background-color:#0FF; 19 line-height:30px; 20 vertical-align:middle; 21 text-align:center; 22 border:1px solid white; 23 } 24 .li1{ 25 height:30px; 26 width:100px; 27 background-color:#0F0; 28 line-height:30px; 29 vertical-align:middle; 30 text-align:center; 31 border:1px solid white; 32 } 33 34 .li:hover{ 35 background-color:#FF3; 36 } 37 .li1:hover{ 38 background-color:#FF3; 39 } 40 41 </style> 42 </head> 43 44 <body> 45 <div id="wai"> 46 <div class="li" onclick="show('cp')">產品中心</div> 47 <div class="liw" id="cp" style="display:none"> 48 <div class="li1">休閒</div> 49 <div class="li1">百貨</div> 50 </div> 51 <div class="li" onclick="show('dt')">最新動態</div> 52 <div class="liw" id="dt" style="display:none"> 53 <div class="li1">公司動態</div> 54 <div class="li1">業界新聞</div> 55 </div> 56 <div class="li">關於我們</div> 57 <div class="li">聯絡我們</div> 58 </div> 59 </body> 60 </html> 61 <script> 62 //單擊事件 63 function show(id){ 64 //獲取所有子選單到陣列，獲取當前元素 65 var s=document.getElementsByClassName("liw"); 66 var a=document.getElementById(id); 67 //判斷裡注意用== 68 //如果當前元素隱藏則顯示，否則隱藏 69 if(a.style.display=="none"){ 70 a.style.display="block"; 71 }else{ 72 a.style.display="none"; 73 } 74 } 75 </script>