Javascript Anchor Link - PullRequest
Новая
       1

Javascript Anchor Link

0 голосов
/ 21 августа 2011

У меня есть список href / text, для которого мне нужно сделать привязки, а затем отобразить эти привязки.Все хорошо, пока я на самом деле не нажму на любой из якорей.Каждый из них открывает вкладку только для последней ссылки.Т.е. если 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.Я очень склонен к более чистому решению, хотя оно включает в себя нечто более простое, чем список событий.

Большое спасибо.

Ответы [ 2 ]

1 голос
/ 21 августа 2011

Вам необходимо создать замыкание: 

var urls = [];
for(var i=0;i<urls.length;i++){
    anchor.addEventListener('click', 
        (function(url) {
            return function() {
                chrome.tabs.create({url: url})
            }
        })(urls[i])
    );
}
1 голос
/ 21 августа 2011

В основном вам просто нужно изменить свой обработчик кликов, чтобы не использовать переменные, которые по-прежнему недействительны. Вот пример кода: 

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. Эта страница mozilla показывает, как вы можете справиться с этим в разделе Internet Explorer.

...