下面代码是为了实现一个类似相册的功能, 为了加快速度只加载小图, 当用户点击小图的时候才在下面的框中显示对应的大图. 初始的大图是一张空白图片.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>美女画廊</h2>
<div id="imagegallery">
<a href="images/1.jpg" title="美女A" >
<img src="images/1-small.jpg" alt="美女1">
</a>
<a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" alt="美女2">
</a>
<a href="images/3.jpg" title="美女C" >
<img src="images/3-small.jpg"alt="美女3">
</a>
<a href="images/4.jpg" title="美女D" >
<img src="images/4-small.jpg" alt="美女4">
</a>
</div>
<!-- 清除浮动 -->
<div style="clear:both"></div>
<!-- 先展示一张空白的图片 -->
<img id="image" src="images/placeholder.png" alt="" width="450px">
<p id="des">选择一个图片</p>
<script>
//获取元素
var imagegallery = document.getElementById("imagegallery");
var links = imagegallery.getElementsByTagName("a");
var image = document.getElementById("image");
var des = document.getElementById("des");
//遍历数组, 添加点击时间
for(var i=0; i<=links.length-1; i++){
links[i].onclick = function(){
//更改image的 src
image.src = links[i].href;
// 更改des内部的文字内容a
des.innerText = links[i].title;
//取消a元素的跳转效果
return false;
};
}
</script>
</body>
</html>
上面的代码中, 遍历数组给每个<a>
标签都绑定单机时间, 看起来没什么问题, 但是在页面中却发现:
- 当点击小图的时候, 图片并没有显示在我们希望出现的大图中, 用于消除
<a>
标签跳转的return false
语句也没有生效, 而是直接打开了<a>
标签中的src路径 (比如images/1.jpg
).
这是因为:
在触发 for 循环内部添加的绑定事件时,所有的批量添加的事件已经成功,触发事件时都是在循环结束之后. 批量绑定的事件的事件函数内部如果有变量 i,要注意,函数执行时已经是在循环结束后.
循环内部定义的变量是一个全局变量,在循环后执行的 i 变量的值是 i 跳出循环时的值.
所以这里用 links[i] 是选不到绑定的 <a>
标签的, 这里应该用 this , this 指向的是 onclicke
前面的事件源 links[i]
for(var i=0; i<=links.length-1; i++){
links[i].onclick = function(){
//更改image的 src
image.src = this.href;
// 更改des内部的文字内容a
des.innerText = this.title;
//取消a元素的跳转效果
return false;
};
}
这样就可正确将下面大图的 src 改为当前 <a>
标签中的 href 了.