循环中的addEventHandler()出现意外结果
addEventHandler() in a loop has unexpected results
我不知道该找什么,所以我找不到以前关于这个主题的任何问题,谷歌也帮不了什么忙。
(function() {
var element = function(str) {
return document.getElementById(str);
},
parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'),
len = parent.length,
slides = slides || [];
for (var i=0; i<len; i++) {
var link = parent[i].getElementsByTagName('a')[0],
slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1));
if (addEventListener) {
link.addEventListener('click', function(event){
event.preventDefault();
alert(slide.getAttribute('id'));
});
} else if (attachEvent) {
}
}
})();
因此,在上面的代码中,在for循环中,我将一个事件附加到所有链接(其中五个),这些链接应该提醒它们所指向的幻灯片的ID(仅用于调试目的),但它们都显示最后一张幻灯片的ID。我还创建了一个jsFiddle,让您在…Action中看到它。
我想我把一些相对简单的事情搞砸了,我就是搞不清是什么。
javascript中的变量是函数范围,即使您在块中声明它们也是如此。这个循环在变量循环周围创建了一个闭包,但在每次迭代时都会重新分配循环。循环完成时,所有闭包都指向数组中的最后一个元素。
要解决此问题,请以不同的方式确定变量的范围:
(function() {
var element = function(str) {
return document.getElementById(str);
},
parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'),
len = parent.length;
for (var i=0; i<len; i++) {
var link = parent[i].getElementsByTagName('a')[0],
slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1));
if (addEventListener) {
link.addEventListener('click', (function(slide){
return function(event) {
event.preventDefault();
alert(slide.getAttribute('id'))
}
})(slide));
} else if (attachEvent) {
}
}
})();
我以前遇到过这个错误,它与slide
的绑定有关,很难解释。这里有一个解决方案。
link.addEventListener('click',
(function(x) {
return function(event){
event.preventDefault();
alert(x.getAttribute('id'));
}
})(slide));
相关文章:
- Node.js使用Series函数(模式?)实现流控制时出现意外结果
- Javascript:函数返回意外结果
- 意外结果,在 ASP.Net 中解析 JSON 对象的数组
- 按位或意外结果
- 来自 JavaScript 循环的意外结果
- 从 JavaScript 中的图像中读取像素数据会返回半透明像素的意外结果
- 在 JS 中短路空数组会产生意外结果:“[] ||真 == []'
- NodeJS中的Parse Json文件在Node中显示意外结果
- 基于给出意外结果的提示输入的逻辑
- JavaScript Regexp.test返回意外结果
- 键控产生意外结果.HTML5游戏
- Javascript do/while循环显示意外结果
- 来自 CSS 和 jQuery 的意外结果
- MongoDB mapReduce方法意外结果
- 具有意外结果的 Javascript 函数参数
- 在 JavaScript 中解析日期字符串的意外结果
- 从内部HTML更改为表单时获得意外结果,输入类型文本字段
- 在计算链逻辑表达式 JavaScript 时出现意外结果
- 意外结果 - 谷歌自动完成针对约克郡
- JavaScript unshift 参数返回意外结果