摘要:实现效果:列如:当前有五个元素,当点击其中一个元素的时候只改变当前的样式,其他元素恢复之前的样式;

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-JS绑定事件跟随切换代码实例

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

实现效果:列如:当前有五个元素,当点击其中一个元素的时候只改变当前的样式,其他元素恢复之前的样式;

总结了三种实现的方法:加深自己的理解,有错误望指正!万分感谢!

代码:匿名函数实现

 <!DOCTYPE html>   <html lang="en">       <head>           <meta charset="utf-8">           <style type="text/css">           *{padding: 0;margin: 0;}           .box{               width: 300px;               height: 30px;               margin:50px auto;           }           span{               display:inline-block;               width: 50px;height: 30px;               background-color: #f0c;               color:#fff;               text-align: center;               line-height: 30px;           }           </style>       </head>       <body>           <!--实现效果:点击某一个元素的时候让其改变样式,其他的恢复之前的样式-->           <p class="box">              <span>内容1</span>              <span>内容2</span>              <span>内容3</span>              <span>内容4</span>              <span>内容5</span>           </p>           <script type="text/javascript">                /*               *使用匿名函数               *由于for循环执行的速度非常快,在点击之前就已经执行完了。再点击的时候i永远是5;               *由于js是链式作用域,会往一层一层上寻找i的值,               *当使用匿名函数以后,for循序中的匿名函数相当于创建了五个匿名函数,当i往上寻找的时候,               * 都是找到function(i)的值,即是对应元素的下标值               *从而找到对应span                */               var spans=document.getElementsByTagName('span');               for(var i=0;i<spans.length;i++){                   (function(i){                       spans[i].onclick=function(){                           console.log(i);                           for(var j=0;j<spans.length;j++){                               if(j==i){                                   spans[j].style.backgroundColor='#909'                               }else{                                   spans[j].style.backgroundColor='#f0c'                               }                           }                       }                   })(i)               }           </script>       </body>   </html>  

实现效果:列如:当前有五个元素,当点击其中一个元素的时候只改变当前的样式,其他元素恢复之前的样式;

总结了三种实现的方法:加深自己的理解,有错误望指正!万分感谢!

代码:匿名函数实现

 <!DOCTYPE html>   <html lang="en">       <head>           <meta charset="utf-8">           <style type="text/css">           *{padding: 0;margin: 0;}           .box{               width: 300px;               height: 30px;               margin:50px auto;           }           span{               display:inline-block;               width: 50px;height: 30px;               background-color: #f0c;               color:#fff;               text-align: center;               line-height: 30px;           }           </style>       </head>       <body>           <!--实现效果:点击某一个元素的时候让其改变样式,其他的恢复之前的样式-->           <p class="box">              <span>内容1</span>              <span>内容2</span>              <span>内容3</span>              <span>内容4</span>              <span>内容5</span>           </p>           <script type="text/javascript">                /*               *使用匿名函数               *由于for循环执行的速度非常快,在点击之前就已经执行完了。再点击的时候i永远是5;               *由于js是链式作用域,会往一层一层上寻找i的值,               *当使用匿名函数以后,for循序中的匿名函数相当于创建了五个匿名函数,当i往上寻找的时候,               * 都是找到function(i)的值,即是对应元素的下标值               *从而找到对应span                */               var spans=document.getElementsByTagName('span');               for(var i=0;i<spans.length;i++){                   (function(i){                       spans[i].onclick=function(){                           console.log(i);                           for(var j=0;j<spans.length;j++){                               if(j==i){                                   spans[j].style.backgroundColor='#909'                               }else{                                   spans[j].style.backgroundColor='#f0c'                               }                           }                       }                   })(i)               }           </script>       </body>   </html>  

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-JS绑定事件跟随切换代码实例

全部内容,希望文章能够帮你解决

js实例教程-JS绑定事件跟随切换代码实例

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过