全局数组返回未定义

Question

我有一个带有 1、2、3、4 等按钮的幻灯片。我还定义了一个包含 4 个图像 url 的数组。当点击按钮时，它会调用具体对应的url。

<div id="slideshow">
<div id="source"><img src="images/blue.jpg">
<ul id="controller">
<li class="button">1</li>
<li class="button">2</li>
<li class="button">3</li>
<li class="button">4</li>
</ul>
</div>
</div>

Javascript：

var button=document.getElementsByClassName("button")
var image=document.getElementsByTagName("img")[0]
var sources=new Array("images/blue.jpg","images/red.jpg","images/yellow.jpg","images/green.jpg");

for (var i=0;i<sources.length;i++){
    button[i].onclick=function(){
            image.src=sources[i]
            }
}

但是当我点击按钮时，sources[i] 总是返回 undefined。

Answer 1

for (var i=0;i<sources.length;i++){
    button[i].onclick= function(i){
       return function(){
            image.src=sources[i]
            }
     }(i);
}

试试这个http://jsbin.com/puyipiro/1/

附： onclick 处理程序中的错误原因 i 等于 4，因此必须使用创建处理程序在每次迭代中保存当前值

Answer 2

您遇到了 JavaScript 中最令人困惑的部分之一，即闭包捕获问题。为了让你的代码重新编写，

var button=document.getElementsByClassName("button")
var image=document.getElementsByTagName("img")[0]
var sources=new Array("images/blue.jpg","images/red.jpg","images/yellow.jpg","images/green.jpg");

for (var i=0;i<sources.length;i++){
   (function (i) {
     button[i].onclick=function(){
       image.src=sources[i]
     }
   })(i);
}

这使用一个立即执行的函数来引入一个新的作用域，因此每个onclick 都有自己的i 副本，在创建函数时其值为i，而不是共享相同的i其值为sources.length。

如果您的目标浏览器支持 ES 6，您可以使用 let 而不是 var，这样您就可以将其写成，

var button=document.getElementsByClassName("button")
var image=document.getElementsByTagName("img")[0]
var sources=new Array("images/blue.jpg","images/red.jpg","images/yellow.jpg","images/green.jpg");

for (var i=0;i<sources.length;i++){
  let j = i;
  button[i].onclick=function() {
    image.src=sources[j]
  }
}

let 语句为循环中的每次迭代创建一个新的 j 作用域，因此 onclick 函数捕获的 j 是不同的，并存储创建函数时 i 的值就像上面立即执行的函数一样。

不幸的是，ES 6 尚未广泛使用，因此您需要一些我最初建议的变体。

Answer 3

您可以将 i 值存储在适当的 DOM 元素（按钮）中，例如作为属性，然后在onclick 处理程序中检索它们。有点像这样：

for (var i=0;i<sources.length;i++){
    button[i].setAttribute('data-btn_i', i);
    button[i].onclick=function(){
        image.src=sources[this.getAttribute('data-btn_i')];
    }
}