脚本宝典收集整理的这篇文章主要介绍了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：384754419，请注明来意。