javascript - 在javascript中迭代焦点组件

Question

我有一些链接，想自动将焦点一一传递。 我正在使用下面的代码。通过焦点时效果很好，但只有一次。 第一次焦点通过时，链接改变颜色，然后传递到下一个。前一个再次变黑，下一个被涂成红色。没问题。 但是当它到达最终链接时不会重新启动。

var i = 0;
var letras = document.getElementsByTagName("a");

function pasaLink() {
    if (i == 0) {
        letras[letras.length-1].style.color = "black";
    } else {
        letras[i-1].style.color = "black";
    }
    letras[i].style.color = "red";
    letras[i].focus();
    i++;
    if (i > letras.length) {
        i= 0;
    }
    setTimeout("pasaLink()",2000);
}

随着最后的 if 和 i=0; 我试图在到达最后一个元素时回到初始索引，然后重新开始迭代整个letras 中的链接集合。 此函数在 body.onload() 中调用。

知道为什么它不起作用吗？

Answer 1

将您的 if 更改为:

if (i >= letras.length) {   
   i= 0;     
} 

工作示例:
http://jsfiddle.net/nivas/Nn62Q/
(单击 Orig 按钮查看您的代码的行为，单击 New 按钮查看新代码的行为。我添加了一个 try... catch 以显示错误)

解释:
假设有五个 a 标签。 当 i > 6(即 6)时，你使 i = 0。但是当i变成5时，函数开头的letras[i].style.color = "red";会失败并抛出异常是抛出异常。流程在这里停止，因此永远不会到达 if (i > letras.length)。