Javascript錨鏈接

Question

我有一個href /文本列表，我需要制作錨點然后顯示這些錨點。 一切都很好，直到我實際點擊任何錨點。 它們每個只打開最后一個href的選項卡。 即，如果列表中最后一個元素的href是href_n，則每個錨鏈接到href_n，即使'href'屬性不同。

//Current basic setup:

loop through list:

anchor = doc.create('a')
divElem = doc.create('div')
anchor.setAttribute('class', 'foo')
anchor.setAttribute('href', 'bar')
anchor.innerHTML = 'mytext'
anchor.addEventListener('click', function() {chrome.tabs.create({url: 'myurl'})});
divElem.appendChild(anchor)
container.appendChild(anchor)

以前我嘗試使用.onClick ，但我一直遇到問題，事件監聽器試圖只是附加到網址。 雖然這涉及比eventlistener更簡單的東西，但我非常適合更清潔的解決方案。

非常感謝。

Answer 1

您大多只需要更改單擊處理程序以不使用仍然無效的變量。 這是示例代碼：

var urlList = [
    "aaaa",
    "bbbb",
];

var textList = [
    "text1",
    "text2"
];

function createAnchors(urls, text, container) {
    for (var i = 0; i < urls.length; i++) {
        var a = document.createElement("a");
        var div = document.createElement("div");
        a.href = urls[i];
        a.innerHTML = text[i];
        a.className = "foo";
        a.addEventListener("click", function() {
            chrome.tabs.create({url: this.href}); 
            return(false);
        });
        div.appendChild(a);
        container.appendChild(div);
    }
}

問題是，在單擊之前，不會評估事件偵聽器函數中的任何變量。 因此，在這種情況下，您可以通過直接從點擊的鏈接獲取網址來避免使用它們。

我希望你也意識到舊版本的IE不支持addEventListener 。 這個mozilla頁面向您展示了如何在Internet Explorer部分中處理它。

Answer 2

你需要創建一個閉包：

var urls = [];
for(var i=0;i<urls.length;i++){
    anchor.addEventListener('click', 
        (function(url) {
            return function() {
                chrome.tabs.create({url: url})
            }
        })(urls[i])
    );
}