Question

初学者Javascript问题。

我正在尝试创建一个函数来查找给定div中的所有链接，并为每个链接设置onclick事件。我可以正确地获得链接hrefs，但是当我尝试在onclick函数中使用它们时，Javascript似乎只使用找到的最后一个值：

即我有这些链接

#purpose

#future

#faq常见

当我使用onclick功能时，每个链接都会报告为#faq链接。

以下是代码：

function prepareLinks () {
var nav = document.getElementById('navigation');
var links = nav.getElementsByTagName ('a');
for (var i = 0; i<links.length; i++) {  
    var linkRef = links[i].getAttribute('href').split("#")[1];
    links[i].onclick = function () {
        var popUp = "You clicked the " +linkRef +" link";
        alert (popUp);
    }
}

}

Answer 1

这里有closure创建。外部变量linkRef保存在内部onclick函数中。试试这个：

clickFunction() {
    var popUp = "You clicked the " + this.href.split("#")[1] +" link";
    // this should mean current clicked element
    alert (popUp);
}

for (var i = 0; i<links.length; i++) {  
    links[i].onclick = clickFunction;
}

Answer 2

这是一个范围问题。触发onclick事件时会评估表达式“You clicked”+ linkRef +“link”，但此时linkRef的值是多少？

Answer 3

您正尝试将单独的onClick处理程序附加到每个链接，但是您不小心附加了相同的链接。

每次都可以使用新的Function（）构造函数

生成一个新函数

links[i].onclick = new Function("","alert('You clicked the '"+linkRef+"' link');");

有关详细信息，请参阅http://tadhg.com/wp/2006/12/12/using-new-function-in-javascript/。

但通常更好的是看你是否可以拥有一个处理程序。有趣的是，当你到达事件处理程序时，“this”关键字指的是事件的生成器。所以你可以让原始代码引用this.getAttribute（“href”）。处理程序太多会使您的javascript事件处理变慢。

在函数中使用循环值的问题

3 个答案: