JS绑定事件跟随切换代码实例(2)
程序员文章站
2022-04-22 23:29:59
实现效果:列如:当前有五个元素,当点击其中一个元素的时候只改变当前的样式,其他元素恢复之前的样式;
总结了三种实现的方法:加深自己的理解,有错误望指正!万分感谢!
代码:给事件...
实现效果:列如:当前有五个元素,当点击其中一个元素的时候只改变当前的样式,其他元素恢复之前的样式;
总结了三种实现的方法:加深自己的理解,有错误望指正!万分感谢!
代码:给事件加属性标记,结合数组实现
<!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"> /* * 给每一个元素添加一个属性index.记下当前是第几个元素 * 结合数组加上标志位, * 如果点击了就将对应的flag数组的值变为1 * 此刻点击的的时候,1有可能是之前点击过的,如果是之前点击的则j!=this.index * 2如果是此刻点击的,则j==this.index */ var spans=document.getelementsbytagname('span'); var flag=[0,0,0,0,0]; for(var i=0;i<spans.length;i++){ spans[i].index=i; spans[i].onclick=function(){ flag[this.index]=1; for(var j=0;j<flag.length;j++){ //判断是否点击过,并且是不是现在点击的这个元素 if(j==this.index && flag[j]==1){ spans[j].style.backgroundcolor='#909' }else if(flag[j]==1&&j!=this.index){ //之前已经点击过,但是不是现在点击的元素 spans[j].style.backgroundcolor='#f0c' } } } } </script> </body> </html>
上一篇: 无题笑话3个
下一篇: jquery一个简单的事件分析