有代码如下：

1
2
3
4
5
6
7
8
9
var lists = document.getElementsByTagName('li');
var oVideo = document.getElementsByTagName('video')[0];
oVideo.currentTime = 1;
for (var i = 0; i < lists.length; i++) {
  lists[i].onclick = function () {
    oVideo.src = films[i];
    oVideo.currentTime = 1;
  }
}

由于执行事件时i已经被销毁，无法再获取到，for循环是一个外部闭包，依次绑定的点击事件是一个函数实例，也产生了一个闭包域，它引用了外部闭包的变量i

有两种解决方法：

  • 为每个对象创建属性保存下标i的值
1
2
3
4
5
6
7
8
9
10
var lists = document.getElementsByTagName('li');
var oVideo = document.getElementsByTagName('video')[0];
oVideo.currentTime = 1;
for (var i = 0; i < lists.length; i++) {
  lists[i].saveSub=i;
  lists[i].onclick = function () {
    oVideo.src = films[this.saveSub];
    oVideo.currentTime = 1;
  }
}
  • 在循环中的点击事件套一个自调用函数，将i的值传递进去
1
2
3
4
5
6
7
8
9
10
var lists = document.getElementsByTagName('li');
var oVideo = document.getElementsByTagName('video')[0];
oVideo.currentTime = 1;
for (var i = 0; i < lists.length; i++) {
  (function (arg) {
    lists[arg].onclick = function () {
    oVideo.src = films[arg];
    oVideo.currentTime = 1;
  }})(i)
}