Question

我有这个代码，这是有效的：

 var wrap_inner = document.getElementsByClassName("wrapper"),
 base_icon = document.getElementsByClassName("inner");
 function fx_effect () {
    for (var i = 0; i < wrap_inner.length; i++) {
       (function (index) {
        wrap_inner[i].addEventListener('click',function() {
        base_icon[index].classList.toggle('tc');
        });
       })(i); <==== what is that? what do that?
    }
}fx_effect();

但我不知道索引是什么：function（index）{... 什么是（i）在功能结束时。为什么使用索引？它的价值是什么？

为什么（i）在这样使用的函数结束时？何时应该以这种方式使用？

为什么像这样的功能不起作用???：

 function fx_effect () {
    for (var i = 0; i < wrap_inner.length; i++) {
        wrap_inner[i].addEventListener('click',function() {
        base_icon[i].classList.toggle('tc');
        });
    }
}fx_effect();

我很困惑:(

Answer 1

概念是javascript closures。第一种方法是为传递的每个值创建一个闭包（范围或堆栈作为类比）。因此，当调用fx_effect时，内部方法会区别地将值0运行到wran_inner.length，因为每个值都在不同的闭包中。

对于第二种方法，范围将只有最终值，因此调用方法fx_effect将导致循环运行该方法的最终值为i，即wrap_inner.length - 1

（i）和（索引）对此函数的作用

1 个答案: