用于循环和警报的 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6729427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript for loop and alert
提问by Squadrons
I am looping through a list of links. I can correctly get the title attribute, and want it displayed onclick. When the page is loaded and when I click on a link, all of the link titles are alerted one by one. What am I doing wrong?
我正在遍历链接列表。我可以正确获取标题属性，并希望它在点击时显示。当页面被加载并且当我点击一个链接时，所有的链接标题都会被一一提醒。我究竟做错了什么？
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);
}
}
回答by Ibu
What you were doing was actually running the alert function. enclosing the whole thing in an anonymous function will only run it when it is clicked
您所做的实际上是运行警报功能。将整个事物封装在匿名函数中只会在单击时运行它
for (var i = 0; i < links.length; i++) {
links[i].onclick = function () {
alert(this.title);
}
}
回答by Paul
You are assigning the onclick to the return value of alert(links[i].title); which doesn't make any sense, since onclick is supposed to be a function.
您正在将 onclick 分配给 alert(links[i].title); 的返回值；这没有任何意义，因为 onclick 应该是一个函数。
What you want instead is somethig like onclick = function(){ alert('Hi'); };
你想要的是像 onclick = function(){ alert('Hi'); };
But
但
Since you are using a variable i in that loop you need to create a local copy of it
onclick = function(){ alert(links[i].title); };would just use the outer scope i and all your links would alert the same message.
由于您在该循环中使用变量 i，因此您需要创建它的本地副本，
onclick = function(){ alert(links[i].title); };只需使用外部作用域 i，您的所有链接都会发出相同的消息。
To fix this you need to write a function that localizes i and returns a new function specific to each link's own onclick:
要解决这个问题，您需要编写一个函数来本地化 i 并返回一个特定于每个链接自己的 onclick 的新函数：
onclick = (function(i){ return function(e){ alert(links[i].title); }; })(i);
onclick = (function(i){ return function(e){ alert(links[i].title); }; })(i);
Final result:
最后结果：
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);
}
}
回答by xyz
You can use jquery. To display title of the link on click.
您可以使用 jquery。单击时显示链接的标题。
$("#nav a").click(function() {
var title = $(this).attr('title');
alert(title);
});
回答by ninjagecko
links.forEach(function(link) {
link.onclick = function(event) {
alert(link.title);
};
}
Also note that your original solution suffered from this problem: JavaScript closure inside loops – simple practical example
另请注意，您的原始解决方案存在此问题： 循环内的 JavaScript 闭包 – 简单实用示例
By passing in our iteration variable into a closure, we get to keep it. If we wrote the above using a for-loop, it would look like this:
通过将迭代变量传递给闭包，我们可以保留它。如果我们使用 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])
}
or
或者
// 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)
}
回答by jbalde
You need change .onclick for a eventlistener same:
您需要更改 .onclick 以获取相同的事件侦听器：
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);
}
}
