调用javascript数组索引值

我正在实现一种跟踪选项卡式内容部分中的点击的方法

单击任何选项卡时，参数的传递方式为clicked=tab4。应单击它=选项卡（值为0-3）。看起来它正在返回数组的长度？如何使事件侦听器函数保持数组的索引值

示例：单击tab1时，事件侦听器中的变量“I”应为0

这是我的密码。除了这一部分，它还能工作，我不知道为什么

function clickTrack(){
    var tabs = ['tab1', 'tab2', 'tab3', 'tab4'];
    for(i = 0; i < tabs.length; i++) {
        document.getElementById(tabs[i]).addEventListener("click", function(){
                trackingFunction('param1','clicked=tab'+ i); 
                            alert(i);
                });

        }
}

函数clickTrack（）{
var tabs=['tab1'，'tab2'，'tab3'，'tab4']；
对于（i=0；i

必须定义新的执行上下文才能保存索引变量的状态，如：

function clickTrack(){
        var tabs = ['tab1', 'tab2', 'tab3', 'tab4'];
        for(i = 0; i < tabs.length; i++) {
            (function(index){
            document.getElementById(tabs[i]).addEventListener("click", function(){
                    trackingFunction('param1','clicked=tab'+ index); 
                                alert(i);
                    });
            })(i);
            }
    }

函数clickTrack（）{
var tabs=['tab1'，'tab2'，'tab3'，'tab4']；
对于（i=0；i

---

立即调用的函数表达式可用于“锁定”值，并有效保存索引变量的状态。

使用

forEach（）

，这将更加清晰：

注意：

Array#forEach

是IE9+，因此对于较旧的浏览器，您需要对其进行多填充

---

关于问题的“为什么”部分，让我们看看代码的相关子集：

for(i = 0; i < tabs.length; i++) {
    document.getElementById(tabs[i]).addEventListener("click", function(){
        alert(i);
    });
}

for（i=0；i

这里需要注意的是click事件处理程序创建的闭包。具体地说，它保留对

i

变量的引用，该变量将继续递增，直到

i

条件失败。所有这些增量都是同步发生的，因此当click处理程序运行时，可以保证

i

的值将是

tabs.length

如果您将其与

forEach（）

示例进行比较，您会注意到单击处理程序中包含的变量是

tabId

，它是每个迭代中唯一的新变量，因此不会遇到与

for

循环相同的问题。

将其id替换为“i”

试试这个：

function clickTrack(){
    var tabs = ['tab1', 'tab2', 'tab3', 'tab4'];
    for(i = 0; i < tabs.length; i++) {
        document.getElementById(tabs[i]).addEventListener("click", function(){
               trackingFunction('param1','clicked='+ this.id);
        });

    }
}

函数clickTrack（）{
var tabs=['tab1'，'tab2'，'tab3'，'tab4']；
对于（i=0；i