Javascript :: 循环背景颜色，最后一种颜色总是在最上面

Question

我的代码有 2 个问题。

我必须使用 !important 来触发第一个循环。
不是循环回到第一种颜色。

我想删除 !important 并使其完全循环。如果我错了请纠正我，但是背景颜色没有 z-index？

这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>&nbsp;</title>
<style>

:root
{
    --color0:#000;
    --color1:green;
    --color2:yellow;
    --color3:red
}

body
{
    background-color:#eee
}

div
{
    background-color:transparent;
    border:1px solid #ccc;
    height:30px;
    width:300px
}

div:nth-child(2)
{
    background-color:var(--color0)
}

.green
{
    background-color:var(--color1) !important
}

.yellow
{
    background-color:var(--color2) !important
}

.red
{
    background-color:var(--color3) !important
}

</style>
</head>
<body>

<div>David Gilmour</div>
<div>Hezi Gangina</div>
<div>Steve Vai</div>

<script>

var looper=0;
var divs=document.querySelectorAll("div");

setInterval(function()
{
    switch(looper)
    {
        case 0:
            divs[1].classList.add("green");
            break;
        case 1:
            divs[1].classList.add("yellow");
            break;
        case 2:
            divs[1].classList.add("red");
            break;
    }
    looper++;
    if(looper===3){looper=0}
},1000);

</script>
</body>
</html>

同样，我的目标是摆脱所有 !important 并使其永远循环。我试过 z-index 属性，但没有任何运气......

我想最干净的解决方案是始终将最后一种颜色设置为顶层，这样可以解决所有问题，但 z-index 在这里不是一个选项...

非常感谢您考虑我的请求。

Answer 1

您必须删除 class。 divs[1].classList.remove("color");。在任何情况下。

Answer 2

让我们首先根据计数器（循环器）值映射 class 名称：

var classes = {
    1: 'green',
    2: 'yellow',
    3: 'red',
};
// set your counter outside the interval
var counter = 1;

var interval = setInterval(function () {
    // remove previous class values of the div, so that no overriding will take place
    divs[1].classList.value = '';
    // add the class name according to counter value
    divs[1].classList.add(classes[counter]);

    // either reset or increment your counter
    counter = counter >= 3 ? 1 : counter + 1;
}, 1000);

Javascript :: 循环背景颜色，最后一种颜色总是在最上面

Javascript :: Loop background color that the last color would always be on top

html

javascript

css

background

colors