目录
-
- 闭包实现切换图片
-
-
-
- 今日金句
-
-
闭包实现切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box>span{
/* 行内块级元素 */
display: inline-block;
width: 100px;
background: #faa;
height: 50px;
color:#fff;
font-size:24px;
/* 文本对齐方式 居中 */
text-align: center;
/* 行高 */
line-height: 50px;
}
#box>span:hover{
cursor: pointer;
background: orange;
}
img{
display: none;
}
</style>
</head>
<body>
<div id="box">
<span>图1</span>
<span>图2</span>
<span>图3</span>
</div>
<img src="img\69.png" alt="图1" >
<img src="img\68.png" alt="图2" >
<img src="img\70.png" alt="图3" >
<script>
window.onload=function(){
//获取box的子
var boxs=document.getElementById('box').children;
for(var i=0;i<boxs.length;i++){
// 自调用函数
boxs[i].onclick=function(){
//使其在局部中能使用变量 i的值
var k=i;
return function(){
//获取 img
var imgobj=document.getElementsByTagName('img');
//把所有的图片隐藏
for(var j=0;j<imgobj.length;j++){
//隐藏图片
imgobj[j].style.display='none';
}
//显示当前点击的图片
imgobj[k].style.display='block';
};
}();
}
}
</script>
</body>
</html>
今日金句
不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。
![JavaScript的那些坑之事件代理事件代理事件阶段[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)