Thiết kế website giá rẻ

Question

I copied a previous code I wrote which has worked perfectly.

Only I pasted it into a for-of loop and now it works only the 2nd time I’d move over it – whereas it worked the 1st time I’d move over it in the first one.

I tried replacing the statements of each of them with one another because I thought that is what’s causing the delay – but it didn’t help.

The Code I copied (worked perfectly):

let allDivs = [...document.querySelectorAll(`div`)];

let Classes = [
    "A0", "A1", "A2", "A3"
];

console.log(`let 'allDivs' equals:`);
console.log(allDivs);

for (let i = 0; i < Classes.length; i++) {
    let allDivsFiltered = allDivs.filter(item => (item.className.match(`A${i}`)));

    console.log('---- ---- ---- ----');
    console.log(`let 'allDivsFiltered [${i}]' equals:`);
    console.log(allDivsFiltered);

    for (let all of allDivsFiltered) {
        all.onmouseover = () => {
            for (let a = 0; a < allDivsFiltered.length; a++) {
                allDivsFiltered[a].classList.add(`B${i}`);
            };
        };

        console.log(all);
    };
};

body {
    display: flex;
    flex-wrap: wrap;
}

div {
    position: relative;

    background-color: slategray;

    width: 100px;
    height: 100px;

    top: 0px;
    left: 0px;

    margin-top: 4px;
    margin-left: 4px;
}

.B0 {
    background-color: red;
}

.B1 {
    background-color: blue;
}

.B2 {
    background-color: green;
}

.B3 {
    background-color: yellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>

    <link rel="stylesheet" href="a.css">
</head>
<body>
    <div class="A0"></div>
    
    <div class="A1"></div>
    <div class="A2"></div>
    
    
    
    <div class="A1"></div>
    
    <div class="A2"></div>
    
    
    <div class="A0"></div>
    <div class="A3"></div>
    
    <div class="A0"></div>
    <div class="A3"></div>
    
    <script src="BBB.js"></script>
</body>
</html>

The Second Attempt (See how the span changes color only the second try):

const important = [...document.getElementsByClassName('important')];

console.log(`const 'important' equals:`);
console.log(important);
console.log('---- ---- ---- ----');

const Classes = [
    "color-c0", "color-c1", "color-c2", "color-c3",
    "color-c4", "color-c5", "color-c6", "color-c7",
];

const Entries = [
    "c0-enter", "c1-enter", "c2-enter", "c3-enter",
    "c4-enter", "c5-enter", "c6-enter", "c7-enter",
];

const Leaves = [
    "c0-leave", "c1-leave", "c2-leave", "c3-leave",
    "c4-leave", "c5-leave", "c6-leave", "c7-leave",
];

for (let i = 0; i < important.length; i++) {
    const allBlocks = [...document.querySelectorAll(`span[id *= block-A${i}] span[class *= color-c]`)];

    for (let each of allBlocks) {
        each.onmouseover = (e) => {
            let currentBlock = e.target.parentNode;

            let currentGroup = [...currentBlock.querySelectorAll(`span[class *= color-c]`)];

            console.log(`const 'currentGroup' of 'currentBlock [${i}]' equals:`);
            console.log(currentGroup);
            console.log('---- ---- ---- ----');

            for (let a = 0; a < Classes.length; a++) {
                let filteredGroups = currentGroup.filter(span => (span.className.match(`color-c${a}`)));

                console.log(`let 'filteredGroup [${a}]' of 'currentBlock [${i}]' equals:`);
                console.log(filteredGroups);
                console.log('---- ---- ---- ----');

                // THE LOOPS WHOSE STATEMENTS HAVE BEEN REPLACED WITH ONE ANOTHER:
                for (let all of filteredGroups) {
                    console.log(`this works the FIRST time!!`);
                    all.onmouseover = () => {
                        for (let b = 0; b < filteredGroups.length; b++) {
                            console.log(`this works the SECOND time!!`);

                            filteredGroups[b].classList.remove(`${Leaves[a]}`);
                            filteredGroups[b].classList.add(`${Entries[a]}`);
                        };
                    };
                // THE LOOPS WHOSE STATEMENTS HAVE BEEN REPLACED WITH ONE ANOTHER ^^

                    all.onmouseout = () => {
                        for (let b = 0; b <filteredGroups.length; b++) {
                            filteredGroups[b].classList.remove(`${Entries[a]}`);
                            filteredGroups[b].classList.add(`${Leaves[a]}`);
                        };
                    };
                };
            };
        };
    };
};

.c0-enter {
    animation: c0-enter 332ms ease 0s 1 normal forwards;
}

@keyframes c0-enter {
    0% {
        background-color: red;
        color: black;
    }

    100% {
        background-color: red;
        color: white;
    }
}

.c0-leave {
    animation: c0-leave 0.3s ease 0s 1 normal forwards;
}

@keyframes c0-leave {
    0% {
        color: white;
        background-color: red;
    }

    100% {
        color: unset;
        background-color: unset;
    }
}

/* DIVIDER */

.c1-enter {
    animation: c1-enter 332ms ease 0s 1 normal forwards;
}

@keyframes c1-enter {
    0% {
        background-color: blue;
        color: black;
    }

    100% {
        background-color: blue;
        color: white;
    }
}

.c1-leave {
    animation: c1-leave 0.3s ease 0s 1 normal forwards;
}

@keyframes c1-leave {
    0% {
        color: white;
        background-color: blue;
    }

    100% {
        color: unset;
        background-color: unset;
    }
}

/* DIVIDER */

.c2-enter {
    animation: c2-enter 332ms ease 0s 1 normal forwards;
}

@keyframes c2-enter {
    0% {
        background-color: black;
        color: black;
    }

    100% {
        background-color: black;
        color: white;
    }
}

.c2-leave {
    animation: c2-leave 0.3s ease 0s 1 normal forwards;
}

@keyframes c2-leave {
    0% {
        color: white;
        background-color: black;
    }

    100% {
        color: unset;
        background-color: unset;
    }
}

/* DIVIDER */

.c3-enter {
    animation: c3-enter 332ms ease 0s 1 normal forwards;
}

@keyframes c3-enter {
    0% {
        background-color: rgb(94, 94, 120);
        color: black;
    }

    100% {
        background-color: rgb(94, 94, 120);
        color: white;
    }
}

.c3-leave {
    animation: c3-leave 0.3s ease 0s 1 normal forwards;
}

@keyframes c3-leave {
    0% {
        color: white;
        background-color: rgb(94, 94, 120);
    }

    100% {
        color: unset;
        background-color: unset;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>

    <link rel="stylesheet" href="a.css">
</head>
<body>

        <span id="block-A0" ; class="important">
            <p style=
            "text-align: center;
            font-size: 40px;
            margin-top: 20%;
            cursor: default;">

                <span class="color-c0">Color 1</span>

                <span class="color-c1">Color 2</span>

                <span class="color-c2">Color 3</span>

                <span class="color-c3">Color 4</span>

            </p>
        </span>

    <script src="a.js"></script>
</body>
</html>

Thiết kế website giá rẻ

Danh mục

For-of loop seems to interrupt a for-loop