Question

我制作了一块5x5的瓷砖网格，我想创建一个每2秒更换一次瓷砖的瓷砖。

基本上，这个瓷砖将以特定的顺序转向，面向上，左，下，右 -

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

这种作品，但似乎跳过某些瓷砖，给我带来了不可思议的表现。

我在这里做错了什么？

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");
        }

    }

Answer 1

修正了您的代码并尝试对其进行评论。您需要将“tattleTower”类添加到每个tile元素中才能使其正常工作。

只有几点：

1）getElementsByClassName返回一个实时NodeList。这意味着它每次访问时都会查找元素（例如，当您访问它的长度属性时）; 2）如果向ALL元素添加公共类，则可以避免使用4个循环并仅使用if循环和if语句。就像在这个例子中你可以添加一个类'tattleTower'。所以每个元素都有2个类。例如：class ='tattleTower tattleTowerLeft'。
3）我不太明白为什么你决定用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");

        }

    }
}

使用setInterval更改类

1 个答案: