我正在尝试创建一个循环,一次为三个项目制作动画。我不断收到此错误“未捕获类型错误:无法读取未定义的属性“样式”。”我认为正在发生的事情是,由于某种原因,动画位可能会导致循环一直运行到三,并且由于位[3]不存在,所以它一直显示未定义。
var t = document.getElementById("infoBits");
var d = t.getElementsByTagName("tr")[0];
var bits = d.getElementsByTagName("td");
for (var i = 0; i < bits.length; i++) {
var opac = 0;
var id = setInterval(frame, 100);
function frame() {
if (opac == 1) {
clearInterval(id);
} else {
opac += 0.1;
bits[i].style.opacity += 0.05;
}
}
}
#infoBits td {
margin: auto;
opacity: 0;
}
<table id="infoBits" border="1">
<tr>
<td>Info Box 1</td>
<td>Info Box 2</td>
<td>Info Box 3</td>
</tr>
</table>
https://jsfiddle.net/yps4w6f4/
对于如何使这项工作或更好的使用方法有任何建议或见解,我将不胜感激。
最佳答案
您遇到的问题是,外部循环一直执行,创建了 3 个 setIntervals 并使 i 的最终值为 3。当调用框架函数时,i 仍然引用值为 3 的外部 i 3.
您可以使用多种策略。创建一个闭包来传递 i 的值,或者可能更简单,使用绑定(bind)函数: setInterval(frame.bind({theBit:bits [i]}) 和内部框架, this.theBit.style.opacity += 0.05;
绑定(bind)函数将在外循环中求值时创建一个新函数,该函数的值等于绑定(bind)参数当时的值,因此它将创建一个不同版本的框架对于每个 i 值的函数。
关于javascript - 使用循环一次为一个项目设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38805392/