2

さまざまなシステムの現在のステータスを信号機の色 (赤、黄色、または緑) で表す 6 つのボックス (div) で構成される Web ページがあります。

各システムが異なるステータスを持つことができるように、これらの色を 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)')

一致するはずなのに一致しません。

どんな提案でも大歓迎です！

4

3 に答える 3

3

クラスを使うことをお勧めします、

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

​

デモ

于 2012-06-11T14:58:52.740 に答える
0

現在、Jqueryとしてタグとして言及していませんが、参考までにこれを行いました。

Jqueryを使用する場合は、次の方法で実行できます。-

ライブデモ

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;
    }
});​
于 2012-06-11T14:55:39.873 に答える
0

ブラウザーは、「赤」などの色を指定すると、色の見え方が異なります。また、あなたのアプローチは間違っていると思います。すべての情報を保持するクラスを使用します。

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();})
于 2012-06-11T14:44:32.967 に答える