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