Javascript :: 循环背景颜色，最后一个颜色总是在顶部答案

【问题标题】：Javascript :: Loop background color that the last color would always be on topJavascript :: 循环背景颜色，最后一个颜色总是在顶部
【发布时间】：2021-02-13 06:21:47
【问题描述】：

我的代码正在处理 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 不是一个选项......

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

【问题讨论】：

标签： javascript html css colors background

【解决方案1】：

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

【讨论】：

但是在那个方法中我仍然必须使用 !important :D

【解决方案2】：

我们先根据计数器（looper）的值来映射类名：

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

【讨论】：