Question

我尝试在特定类中预览具有与另一个类相同索引值的图像，用户从中选择图像。到目前为止，我已经这样做了。当我为输出类索引提供特定值时，图像显示在该特定类

中

var input = document.getElementsByClassName("input");
var output = document.getElementsByClassName("output");

for (i = 0; i < input.length; i++) {
    input[i].onchange = function() {
            output[0].src = URL.createObjectURL(event.target.files[0]);
     }
}

然而，当我试图通过＆＃39; i＆＃39;变量到该类的索引代码不起作用。

var input = document.getElementsByClassName("input");
var output = document.getElementsByClassName("output");

for (i = 0; i < input.length; i++) {
    input[i].onchange = function() {
            output[i].src = URL.createObjectURL(event.target.files[0]);
     }
}

我该如何解决这个问题？

Answer 1

在此代码中，您使用了closure函数。当函数为invoked时，会创建一个context。

详细了解here。

一种方法是使用Immediately-invoked function expression，如下所示：

for (i = 0; i < input.length; i++) {        
    (function(index){
        input[index].onchange = function() {
            output[index].src = URL.createObjectURL(event.target.files[0]);
        }
    }(i));
}

以下是以closures方式使用wrong的示例。

＆＃13;

var input=document.getElementsByClassName('abc');
for (i = 0; i < input.length; i++) {   
        input[i].onclick = function() {
            console.log(i);
        }
}

＆＃13;

<button class="abc">Button1</button>
<button class="abc">Button2</button>
<button class="abc">Button3</button>

＆＃13;

如您所见，您点击的所有button，console.log都会显示3。

为什么会出现这种情况？

创建一个context。完成for loop后，i的值仍为3，只要您clicked一个按钮，此值就会显示在console中。

我们如何解决这个问题？

正如我上面提到的，一种方法是使用IIFE。

＆＃13;

var input=document.getElementsByClassName('abc');
for (i = 0; i < input.length; i++) {   
      (function(index){
        input[index].onclick = function() {
            console.log(index);
        }
      }(i)); 

}

＆＃13;

<button class="abc">Button1</button>
<button class="abc">Button2</button>
<button class="abc">Button3</button>

＆＃13;

Javascript如何将类的索引值传递给函数内的另一个类？

1 个答案: