JavaScript事件与例子（三）

时间：2022-02-20 07:55:00

两个例子，好友选中效果和左侧右侧子菜单

一、好友选中效果

可以通过设置属性的方式判断当前是否被选中，也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中，从而进行操作

1.通过设置属性的方式判断选中的元素

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>好友选中</title>
 <style>
     *{
         margin:0px auto;
         padding:0px;
     }
     #wai{
         height:400px;
         width:200px;
         margin-top:100px;
         margin-left:100px;
     }
     .li{
         height:30px;
         width:200px;
         background-color:blue;
         border:1px solid white;
         text-align:center;
         line-height:30px;
         vertical-align:middle;}

 </style>
 </head>

 <body>
 <div id="wai">
     <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">风吹柳叶遮黄雀</div>
     <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">薄翅不觉已落蝉</div>
     <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">谁将新樽辞旧月</div>
     <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">今月曾今朝故人</div>
 </div>
 </body>
 </html>
 <script>
     //首先获取到所有好友列表
     var l=document.getElementsByClassName("li");
     //鼠标单击事件
     function xuan(b){
         //遍历数组，设置属性ys的值为0，颜色为蓝
         for(var i=0;i<l.length;i++){
             l[i].setAttribute("ys","0");
             l[i].style.backgroundColor="blue";
         }
         //当前元素ys属性值为1，颜色为红
         b.setAttribute("ys","1");
         b.style.backgroundColor="red";
     }

     //鼠标移上的效果
     function bian(a){
         //遍历数组内容，只要ys属性的值是0，颜色变为蓝色
         for(var i=0;i<l.length;i++){
             if(l[i].getAttribute("ys")=="0"){
                 l[i].style.backgroundColor="blue";
             }
         }
         //获取当前元素ys属性值如为0，则颜色变为绿
         if(a.getAttribute("ys")=="0"){
             a.style.backgroundColor="green";
         }
     }
     //鼠标离开事件
     function li(c){
         //如果当前元素ys值为0，颜色设为蓝色
         if(c.getAttribute("ys")=="0"){
             c.style.backgroundColor="blue";
         }
     }
 </script>

2.通过获取当前元素颜色的方式判断

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>好友选中</title>
 <style>
     *{
         margin:0px auto;
     }
     #wai{
         margin-top:100px;
         margin-left:100px;
         width:300px;
         height:300px;}
     .li{
         margin:1px;
         background-color:white;
         font-family:微软雅黑;
         font-size:16px;
         text-align:center;
         width:300px;
         height:50px;
         line-height:50px;
         vertical-align:middle;
         float:left;}
 </style>
 </head>

 <body>
     <div id="wai">
         <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">风吹柳叶遮黄雀</div>
         <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">薄翅不觉已落蝉</div>
         <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">谁将新樽辞旧月</div>
         <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">今月曾经照古人</div>
     </div>
 </body>
 </html>
 <script>
     //之前曾经用给每个div加id，然后函数传回id的方式，错误，因为这样函数写在div传回自己的用this，如果函数传回的是下面的div的改变，可以尝试用加div

     //获取所有列表好友到数组
     var z=document.getElementsByClassName('li');

     //鼠标移上的效果
     function yishang(s){
         //遍历数组，判断每个颜色是绿色即移上状态，则颜色设为白色即初始颜色，如果颜色是蓝色即选中状态，则跳出本次循环颜色依旧为蓝色

         for(i=0;i<z.length;i++){
             if(z[i].style.backgroundColor=="green"){
                 z[i].style.backgroundColor="white";
             }else if(z[i].style.backgroundColor=="blue"){
                 //跳出本次循环
                 continue;
             }
             //在判断当前元素颜色是否是蓝色即被选中状态，是则跳出即状态不变，否则颜色设为绿色即鼠标移上的效果
             if(s.style.backgroundColor=="blue"){
                 continue;
             }else{
                 s.style.backgroundColor="green";
             }
             /*
             此方法原本作为对上面方法的优化，可以直接判断现在的颜色如果是白色，则变为绿色，该方法的漏洞在于，当前没有颜色可以获取
             如果使用该方法，应当在元素中内联颜色
             if(s.style.backgroundColor=="white"){
                 s.style.backgroundColor="green";
             }e*/
         }
     }
     //鼠标单击事件，鼠标单击首先将所有元素设置为初始白色，然后当前颜色设为蓝色
     function dianJi(y){
         for(i=0;i<z.length;i++){
             z[i].style.backgroundColor="white";
         }
         y.style.backgroundColor="blue";
     }
     //鼠标离开事件，鼠标离开如果颜色是绿色即未被选中，则变为白色
     function zou(z){
         if(z.style.backgroundColor=="green"){
             z.style.backgroundColor="white";
         }
     }
 </script>

使用这种方法，为何能够获取到当前元素颜色进行判断？首先鼠标移上，执行函数 yishang()，然后进for循环遍历进行判断，不符合判断任何一种情况，则无操作，进行下一个判断，如果当前元素颜色是被选中状态则跳出，如果不是则设为绿色，第一个颜色就这样赋值上了

这个问题我出错的几点需要注意：

1.在函数中，什么时候用数组元素的样式，什么时候用当前元素的样式多次搞错

2.判断中判断样式是否是该颜色，一定要用==

二、左侧右侧子菜单

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>子菜单</title>
 <style>
     *{
         margin:0px auto;
         padding:0px;}
     #wai{
         margin-top:150px;
         margin-left:200px;
         height:300px;
         width:100px;}
     .li{
         height:30px;
         width:100px;
         background-color:#0FF;
         line-height:30px;
         vertical-align:middle;
         text-align:center;
         border:1px solid white;
         }
     .li1{
         height:30px;
         width:100px;
         background-color:#0F0;
         line-height:30px;
         vertical-align:middle;
         text-align:center;
         border:1px solid white;
         }

     .li:hover{
         background-color:#FF3;
         }
     .li1:hover{
         background-color:#FF3;
         }

 </style>
 </head>

 <body>
     <div id="wai">
         <div class="li" onclick="show('cp')">产品中心</div>
         <div class="liw" id="cp" style="display:none">
             <div class="li1">休闲</div>
             <div class="li1">百货</div>
         </div>
         <div class="li" onclick="show('dt')">最新动态</div>
         <div class="liw" id="dt" style="display:none">
             <div class="li1">公司动态</div>
             <div class="li1">业界新闻</div>
         </div>
         <div class="li">关于我们</div>
         <div class="li">联系我们</div>
     </div>
 </body>
 </html>
 <script>
     //单击事件
     function show(id){
         //获取所有子菜单到数组，获取当前元素
         var s=document.getElementsByClassName("liw");
         var a=document.getElementById(id);
         //判断里注意用==
         //如果当前元素隐藏则显示，否则隐藏
         if(a.style.display=="none"){
             a.style.display="block";
         }else{
             a.style.display="none";
         }
     }
 </script>

相关文章