JS绑定事件跟随切换代码实例（2）
程序员文章站
2022-08-21 18:30:53
实现效果：列如：当前有五个元素，当点击其中一个元素的时候只改变当前的样式，其他元素恢复之前的样式；
总结了三种实现的方法：加深自己的理解，有错误望指正！万分感谢！
代码：给事件...
实现效果：列如：当前有五个元素，当点击其中一个元素的时候只改变当前的样式，其他元素恢复之前的样式；
总结了三种实现的方法：加深自己的理解，有错误望指正！万分感谢！
代码：给事件加属性标记，结合数组实现
<!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> 上一篇： 赣州有什么好吃的 十大特色美食小吃推荐
下一篇： PHP部署时的几个配置修改说明