JavaScript anchor 链接

Question

我有一个 href/文本列表，我需要为其创建 anchor ，然后显示这些 anchor 。一切都很好，直到我真正点击任何一个 anchor 。他们每个人只打开最后一个 href 的选项卡。 IE。如果列表中最后一个元素的 href 是 href_n，则每个 anchor 都会链接到 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，但我一直遇到事件监听器试图仅附加到 URL 的问题。我非常愿意采用更干净的解决方案，尽管这涉及到比事件监听器更简单的东西。

非常感谢。

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

问题是事件监听器函数中的任何变量在单击之前都不会被评估。因此，在这种情况下，您可以通过直接从单击的链接获取 url 来避免使用它们。

我希望您也意识到旧版本的 IE 不支持 addEventListener。 This mozilla page向您展示如何在 Internet Explorer 部分中处理该问题。