Javascript分别循环多个div的背景颜色

Question

我有一个由 6 个框、div 组成的网页，它们通过红绿灯颜色(红色、琥珀色或绿色)代表不同系统的当前状态。

我希望能够为每个 div 分别循环显示这些颜色，以便每个系统都可以有不同的状态。

盒子的伪代码

<div id="system1">System Name</div>
<div id="system2">System Name</div>
<div id="system3">Systen Name</div>

等等。

在所有系统的页面加载时，CSS 将背景颜色声明为红色，然后我希望能够单独单击每个 div 以循环显示琥珀色、绿色，然后返回红色以选择最合适的颜色。

我正在努力使用 Javascript 来让它工作。我正在尝试使用

document.getElementById(elem).style.backgroundColor = 'red'; 

在 If 语句中查看当前颜色并相应更改，但 Javascript 返回 rgb 值。例如，当我尝试时，

document.getElementById(elem).style.backgroundColor == 'rgb(255,231,51)')

它不匹配，即使它应该匹配。

非常感谢任何建议!

Answer 1

我推荐你使用类，

<style type="text/css">
    .red {background-color:red;}
    .amber {background-color:yellow;}
    .green {background-color:green;}
</style>

<script type="text/javascript">

function changeColor(e) {
    var c = e.className;
    e.className = (c == 'red') ? 'amber' : 
                  (c == 'amber') ? 'green' : 
                  (c == 'green') ? 'red' : ''; 
}

</script>
<div class="red" id="system1" onclick="changeColor(this)">System Name</div>
<div class="green" id="system2" onclick="changeColor(this)">System Name</div>
<div class="amber" id="system3" onclick="changeColor(this)">Systen Name</div>

​

DEMO