Question

我实施了一种跟踪标签内容部分中点击次数的方法。

当我单击任何选项卡时，参数将作为clicked = tab4传递。应该点击= tab（值为0-3）。它看起来像是返回数组的长度？如何使事件侦听器函数保持数组的索引值。

示例：当我单击tab1时，变量＆＃34; i＆＃34;在事件监听器应为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);
                });

        }
}

Answer 1

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

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);
            }
    }

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

Answer 2

使用forEach()：

会更加清晰

function clickTrack(){
    ['tab1', 'tab2', 'tab3', 'tab4'].forEach(function(tabId) {
        document.getElementById(tabId).addEventListener("click", function(){
            trackingFunction('param1','clicked=' + tabId);
            alert(tabId);
        });
    });
}

注意： Array#forEach是IE9 +，因此您需要为旧浏览器填充它。

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

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

这里要注意的是由click事件处理程序创建的闭包。具体来说，它保留对i变量的引用，该变量继续递增，直到i < tabs.length条件失败。所有这些增量同步发生，因此当点击处理程序运行时，它保证i的值为tabs.length。

如果将其与forEach()示例进行比较，您会注意到点击处理程序所包含的变量是tabId，这是每次迭代的唯一新变量，并且因此，不会遇到与for循环相同的问题。

Answer 3

将“i”替换为其ID ...

http://jsfiddle.net/yzu7kLf4/

试试这个：

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);
        });

    }
}

回想一下javascript数组的索引值

3 个答案: