效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JsEvents</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 0 20%;
}
.hide{
display: none;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<header>
<h1>Click the link and show you img</h1>
</header>
<main>
<ul>
<li><a data-img="LiXin-Pic" id="LiXin" href="#">LiXin</a></li>
<li><a data-img="LuXian-Pic" id="LuXian" href="#">LuXian</a></li>
<li><a data-img="Ruo-Pic" id="Ruo" href="#">Ruo</a></li>
</ul>
<img class="hide" src="/images/LiXin.jpg" alt="" id="LiXin-Pic">
<img class="hide" src="/images/LuXian.jpg" alt="" id="LuXian-Pic">
<img class="hide" src="/images/Ruo.jpg" alt="" id="Ruo-Pic">
</main>
<script src="/script/events.js"></script>
</body>
</html>
event.js
var linxin = document.getElementById('LiXin');
var luXian = document.getElementById('LuXian');
var ruo = document.getElementById('Ruo');
linxin.addEventListener('click',show);
luXian.addEventListener('click',show);
ruo.addEventListener('click',show);
//传统写法,代码会存在大量冗余,因为需要获得每个img的ID以修改className
// var lixinPic = document.getElementById('LiXin-Pic')
// function show(){
// if(lixinPic.className=='hide'){
// lixinPic.className=""
// }else{
// lixinPic.className='hide'
// }
// }
//那么为了减少代码量,额外设置元素a的data-img属性并将其值设置为img的id,
//从而只需获得a就能得到与之对应的img,且通过this,解决了复用的问题
function show(){
/*以下的代码用于解决“多选问题”*/
var allImages = document.querySelectorAll("img");
for(var i = 0;i<allImages.length;i++)
{
allImages[i].className='hide';
}
/*获取当前点击的data-img属性,该属性值与img的id存在对应关系,从而建立链接关系*/
var picId = this.attributes["data-img"].value;
// alert(picId)
var pic = document.getElementById(picId);
if(pic.className=='hide'){
pic.className="";
}else{
pic.className='hide';
}
}