关于闭包的介绍,推荐两篇文章:
廖雪峰javascript教程-闭包:
博客园园友:
http://www.cnblogs.com/onepixel/p/5062456.html
循环绑定事件,是个典型的闭包问题。
比如现在页面有四个头像,我点击切换
html代码如下:
<div id="imgList">
<img src="../images/001.jpg" class="on" />
<img src="../images/002.jpg" />
<img src="../images/003.jpg" />
<img src="../images/004.jpg" />
</div>
那么循环绑定事件,我们会大概会这么写:
for (var i = 0; i < images.length; i++) {
images[i].onclick = function () {
images[i].className="on";
}
}
这么写的话,点击图片的时候,调用方法,i已经是4了,所以images[4].className就报错了。
根据闭包的知识,我们修改成如下写法:
var imageList = document.getElementById("imgList");
imageList.imageSelected = 0;
var images = imageList.children;
for (var i = 0; i < images.length; i++) {
images[i].onclick = (function (num) {
return function () {
if (imageList.imageSelected == num) return;
images[imageList.imageSelected].className = '';
this.className = "on";
imageList.imageSelected = num;
}
})(i);
}
里面用到了立即执行函数,这样的话每个i就能对应上了。