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

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

我想能够循环通过这些颜色分别为每个div，使每个系统可以有一个不同的状态

盒子的伪代码

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

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

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

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

---

非常感谢您的任何建议

当你给它们诸如“红色”这样的颜色时，浏览器会以不同的方式翻译颜色。 我也认为你的方法是错误的。 我会使用维护所有信息的类

ACommonSystem = function(linkto) 
    {
    this.domobject = linkto;
    // 0 = off, 1 = on, 2 = crashed, 3 = destroyed
    this.state = 0;
    this.errors = null;
    }
ACommonSystem.prototype.turnOn = function()
    {
    if(this.state < 2)
        {
        this.state = 1;
        this.domobject.style.backgroundColor = "green";
        }
    }
ACommonSystem.prototype.turnOff = function()
    {
    this.state = 0;
    this.domobject.style.backgroundColor = "blue";
    }
ACommonSystem.prototype.crash = function()
    {
    this.state = 2;
    this.domobject.style.backgroundColor = "red";
    this.errors = "I've been kicked";
    }
ACommonSystem.prototype.die = function()
    {
    this.state = 3;
    this.domobject.style.backgroundColor = "black";
    this.errors = "i've burned out";
    }

mysystem1 = ACommonSystem(document.getElementById('system1'));
mysystem1.turnOn();
window.setTimeout(3000,function(){mysystem1.crash();})

ACommonSystem=函数（链接到）
{
this.domobject=linkto；
//0=关闭，1=打开，2=崩溃，3=破坏
该状态=0；
this.errors=null；
}
ACommonSystem.prototype.turnOn=函数（）
{
如果（该状态<2）
{
该状态=1；
this.domobject.style.backgroundColor=“绿色”；
}
}
ACommonSystem.prototype.turnOff=函数（）
{
该状态=0；
this.domobject.style.backgroundColor=“蓝色”；
}
ACommonSystem.prototype.crash=函数（）
{
该状态=2；
this.domobject.style.backgroundColor=“红色”；
this.errors=“我被踢了”；
}
ACommonSystem.prototype.die=函数（）
{
该状态=3；
this.domobject.style.backgroundColor=“黑色”；
this.errors=“我已经筋疲力尽”；
}
mysystem1=ACommonSystem（document.getElementById（'system1'）；
mysystem1.turnOn（）；
setTimeout（3000，函数（）{mysystem1.crash（）；}）

目前您还没有将as标记提到Jquery，但为了供您参考，我已经这样做了

如果您愿意使用Jquery，可以这样做：-

HTML:

---

我建议你使用课堂

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

​

.red{背景色：红色；}
.amber{背景色：黄色；}
.green{背景色：绿色；}
函数更改颜色（e）{
var c=e.className；
e、 类名=（c=='red'）？'amber'：
（c==“琥珀色”）？“绿色”：
（c==‘绿色’）？‘红色’：“”；
}
系统名称
系统名称
系统名称
​

---

尝试使用十六进制而不是像“红色”这样的颜色名称，或者您可以尝试使用警报来了解返回的数据类型，如果它们是示例代码，则更改您的密码，我已经尝试使用十六进制并使用警报。警报显示了rgb值，但当我尝试进行比较时，即使是在匹配时，它也没有将其视为匹配。谢谢，这绝对是我想要的！谢谢你的时间，我不认为这正是我想要的，但是这促使我更多地关注JQueryTank你的帮助。不幸的是，虽然我相信你在这方面付出了很多努力，但我对javascript非常陌生，这让我感到非常困惑@GregBains，至少花点时间去学吧，如果你不理解答案，你就不应该问这个问题。我对javascript有基本的理解，对PHP和HTML有中级的理解。我也经常使用其他编程语言，但我只是从Javascript开始。仅仅因为我是新手并不意味着我对编程不感兴趣。我正在努力学习，并且已经能够理解张贴在这里的其他答案。不幸的是，你的答案比其他答案要复杂得多，这就是为什么我要努力解决这个问题。也就是说，我会努力理解它来帮助我的学习。如果你不学习面向对象编程（OOP），那么你所做的是非常低效的。它是C风格语言的强大功能之一，你可以创建对象并与之交互，因此你可以创建“标准”访问点来区分。我建议您阅读以下主题的教程：Css、javascript面向对象编程、HTMLDOM对象及其选择器、原型设计和实验。你需要热爱编程，否则你将无法坚持下去；-）

<div class="system">System Name</div>
<div class="system">System Name</div>
<div class="system">Systen Name</div>

$('.system').click(function() {
    switch ($('div.system').index(this))
    {
        case 0: 
                $(this).css('background-color', 'red');
                break;
        case 1: 
                $(this).css('background-color', 'green');
                break;
        case 2: 
                $(this).css('background-color', 'blue');
                break;
    }
});​

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

​