Javascript 使用setInterval更改类

我已经制作了一个5x5的磁贴网格，我想创建一个磁贴，每2秒更改一次它的类

基本上，这块瓷砖会朝上、朝左、朝下、朝右——以特定的顺序旋转

现在，我正在将具有特定类的所有元素放入节点列表/数组中。 然后，我遍历每个元素，用新的颜色/类替换当前的颜色/类

这类作品，但似乎跳过了某些瓷砖，给了我古怪的表现

我做错了什么

function rotateTile(){
    var tattleTowerUpArray = document.getElementsByClassName("tattleTowerUp");
    var tattleTowerLeftArray = document.getElementsByClassName("tattleTowerLeft");
    var tattleTowerDownArray = document.getElementsByClassName("tattleTowerDown");
    var tattleTowerRightArray = document.getElementsByClassName("tattleTowerRight");

    for(var i=0; i < tattleTowerUpArray.length; i++){
        document.getElementById(tattleTowerUpArray.item(i).id).style.borderTopColor = "black";
        document.getElementById(tattleTowerUpArray.item(i).id).style.borderLeftColor = "red";
        document.getElementById(tattleTowerUpArray.item(i).id).classList.remove("tattleTowerUp");
        document.getElementById(tattleTowerUpArray.item(i).id).classList.add("tattleTowerLeft");
        }

    for(var j=0; j < tattleTowerLeftArray.length; j++){

        document.getElementById(tattleTowerLeftArray.item(j).id).style.borderLeftColor = "black";
        document.getElementById(tattleTowerLeftArray.item(j).id).style.borderBottomColor = "red";
        document.getElementById(tattleTowerLeftArray.item(j).id).classList.remove("tattleTowerLeft");
        document.getElementById(tattleTowerLeftArray.item(j).id).classList.add("tattleTowerDown");

        }

    for(var k=0; k < tattleTowerDownArray.length; k++){

        document.getElementById(tattleTowerDownArray.item(k).id).style.borderBottomColor = "black";
        document.getElementById(tattleTowerDownArray.item(k).id).style.borderRightColor = "red";
        document.getElementById(tattleTowerDownArray.item(k).id).classList.remove("tattleTowerDown");
        document.getElementById(tattleTowerDownArray.item(k).id).classList.add("tattleTowerRight");
        }

    for(var l=0; l < tattleTowerRightArray.length; l++){

        document.getElementById(tattleTowerRightArray.item(l).id).style.borderRightColor = "black";
        document.getElementById(tattleTowerRightArray.item(l).id).style.borderTopColor = "red";
        document.getElementById(tattleTowerRightArray.item(l).id).classList.remove("tattleTowerRight");
        document.getElementById(tattleTowerRightArray.item(l).id).classList.add("tattleTowerUp");
        }

    }

---

已修复代码并尝试对其进行注释。您需要将类“tattleTower”添加到每个瓷砖元素中，才能使其正常工作

只有几点：

1 getElementsByClassName返回一个活动节点列表。这意味着每次访问它时它都会查找元素，就像访问它的length属性时一样； 2如果向所有元素添加一个公共类，则可以避免使用4个循环，并在if语句中仅使用1个循环。如本例所示，您可以添加一个类“tattleTower”。所以每个元素都有两个类。例如：tattleTower Tattletwerleft。 我不太明白你为什么决定用js改变边框样式。您可以在这些类中的CSS中执行此操作。如果您对此感到担忧，可以显式定义希望转换使用的属性。 4您不需要使用id来访问循环中的特定元素。你可以使用el[i]。el[0]将给出数组的第一个元素。 5如果您执行昂贵的操作，请尝试使用变量尽可能多地缓存

function rotateTile(){

    // set up all variables at the top of the function
    // use querySelectorAll for static NodeList, instead of live nodeList
    var tattleTowerArray = document.querySelectorAll(".tattleTower"), 
        el, i, len, elClassList, elStyle;

    // use one loop instead of four
    // cache array's length for performance (to avoid asking for it on each iteration)
    for (i = 0, len = tattleTowerArray.length; i < len; i++){

        el = tattleTowerArray[i]; // cache element for performance
        elClassList = el.classList; // cache element's classList
        elStyle = el.style; // cache element's style object


        // use 'if-else if' statements to check for class (you can change it to switch block, but i don't think it'd be best here)
        if (elClassList.contains('tattleTowerUp')) {

            elStyle.borderTopColor = "black";
            elStyle.borderLeftColor = "red";

            elClassList.remove("tattleTowerUp");
            elClassList.add("tattleTowerLeft");

        } else if (elClassList.contains('tattleTowerLeft')) {

            elStyle.borderLeftColor = "black";
            elStyle.borderBottomColor = "red";

            elClassList.remove("tattleTowerLeft");
            elClassList.add("tattleTowerDown");

        } else if (elClassList.contains('tattleTowerDown')) {

            elStyle.borderBottomColor = "black";
            elStyle.borderRightColor = "red";

            elClassList.remove("tattleTowerDown");
            elClassList.add("tattleTowerRight");

        } else if (elClassList.contains('tattleTowerRight')) {

            elStyle.borderRightColor = "black";
            elStyle.borderTopColor = "red";

            elClassList.remove("tattleTowerRight");
            elClassList.add("tattleTowerUp");

        }

    }
}

---

你能创建一个JSFIDLE吗？我想根据标题这将是一个简单的问题。然后我看到了所有的循环和大量的重复代码，嗯，是吗？我的头爆炸了。我会这样做：我需要更多的声誉来提升你，等等。谢谢你的建议。你已经提供了我正在做的事情的清理版本。直接改变边框颜色是这个问题的另一种解决方案，但它和我实现的类改变一样是断断续续的。事实上，一旦我在for循环中添加了.length，这就让瓷砖旋转得非常完美。再次感谢，哦，伙计。对不起，我的错，完全忘了打印出来。编辑了答案。很高兴它对你有用！我花了很长时间才弄明白，因为节点列表和HTMLCollection是可变的！啊。无论如何，下面是使用CSS和干函数代码的相同示例：