Question

我正在循环链接列表。我可以正确获取title属性，并希望它显示在onclick上。加载页面时，当我点击链接时，会逐个提醒所有链接标题。我做错了什么？

function prepareShowElement () {
var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].onclick = alert(links[i].title);
    }
}

Answer 1

您正在做的是实际运行警报功能。将整个事物封装在一个匿名函数中只会在单击它时运行它

for (var i = 0; i < links.length; i++) {
    links[i].onclick = function () {
        alert(this.title);
       }
    }

Answer 2

您正在将onclick分配给alert的返回值（links [i] .title）;这没有任何意义，因为onclick应该是一个函数。

你想要的是像onclick = function(){ alert('Hi'); };

这样的东西

<强>但是

由于您在该循环中使用变量i，因此需要创建它的本地副本 onclick = function(){ alert(links[i].title); };只会使用外部范围i，所有链接都会提醒相同的消息。

要解决此问题，您需要编写一个本地化i的函数，并返回一个特定于每个链接自己的onclick的新函数：

onclick = (function(i){ return function(e){ alert(links[i].title); }; })(i);

最终结果：

function prepareShowElement () {
var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].onclick = (function(i){ return function(e){ alert(links[i].title); }; })(i);
    }
}

Answer 3

您可以使用jquery。单击时显示链接的标题。

$("#nav a").click(function() {
    var title = $(this).attr('title');
    alert(title);
});

Answer 4

links.forEach(function(link) {
    link.onclick = function(event) {
        alert(link.title);
    };
}

另请注意，您的原始解决方案遇到了此问题： JavaScript closure inside loops – simple practical example

通过将迭代变量传递给闭包，我们可以保留它。如果我们使用for循环编写上述内容，它将如下所示：

// machinery needed to get the same effect as above
for (var i = 0; i < links.length; i++) {
    (function(link){
        link.onclick = function(event) {
            alert(link.title);
        }
    })(links[i])
}

或

// machinery needed to get the same effect as above (version 2)
for (var i = 0; i < links.length; i++) {
    (function(i){
        links[i].onclick = function(event) {
            alert(links[i].title);
        }
    })(i)
}

Answer 5

您需要更改.onclick for eventlistener same：

function prepareShowElement () {
  var nav = document.getElementById('nav');
  var links = nav.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click',function() { 
        alert(links[i].title);
    },false);
  }
}

Javascript for循环和警报

5 个答案: