調出JavaScript數組索引值

Question

我正在實現一種跟蹤選項卡式內容部分中點擊的方法。

當我單擊任何選項卡時，該參數將作為clicked = tab4傳遞。 應該單擊== tab（值為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);
                });

        }
}

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

這里要注意的是單擊事件處理程序創建的閉包。 具體來說，它保留對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);
        });

    }
}