Javascript 锚链接

Question

我有一个 href / text 列表，我需要为其制作锚点，然后显示这些锚点。一切都很好，直到我真正点击任何锚点。他们每个人都只为最后一个 href 打开一个选项卡。 IE。如果列表中最后一个元素的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，但我一直遇到事件侦听器试图仅附加到 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 部分向您展示了如何处理它。

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