Question

我有一个由6个盒子组成的网页，div代表交通灯颜色的不同系统的当前状态 - 红色，琥珀色或绿色。

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

Peduedocode for boxes

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

等等。

对于所有系统，CSS页面加载时背景颜色被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

Answer 2

当你给它们像“红色”这样的颜色时，浏览器会对颜色的外观进行不同的翻译。另外我认为你的做法是错误的。我会使用维护所有信息的类。

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

Answer 3

目前你还没有像Jquery那样提到标签，但是为了你的参考，我已经做到了。

如果你愿意去Jquery，你可以这样做： -

<强> LIVE DEMO

HTML：

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

JQuery的：

$('.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;
    }
});

Javascript单独循环多个div的背景颜色

3 个答案:

HTML：

JQuery的：