JavaScriptが要素が特定の色であるかどうかを確認するにはどうすればよいですか？

Question

私は要素が色と一致するかどうかを確認する必要があるコードを持っています。それ以外の場合は、デフォルトの色に設定されます。

var caps = $("#caps"); 
 
if (caps.css('background-color') == "rgb(225, 0, 0)") { 
 
    $('body').on('click', '#caps', function(event) { 
 
    $('.clight').css({ 
 
     'background-color': 'red', 
 
     'box-shadow': '0px 0px 20px yellow' 
 
    }); 
 
    $('#l2').css({ 
 
     'background-color': 'red', 
 
     'box-shadow': '0px 0px 20px yellow' 
 
    }); 
 
    event.preventDefault(); 
 
    } else { 
 
    $('.clight').css('background-color', 'white'); 
 
    });

.caps { 
 
    /* Caps button CSS */ 
 
    width: 70px; 
 
    font-size: 12px; 
 
    line-height: 12px; 
 
} 
 

 
.clight { 
 
    /* Caps button light CSS */ 
 
    width: 10px; 
 
    height: 10px; 
 
    top: 10px; 
 
    margin-left: 1px; 
 
    background-color: grey; 
 
    position: relative; 
 
    border-radius: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="key caps" id="caps"> 
 
    <!-- Caps Lock Key --> 
 
    <div class="clight"> 
 
    <!-- Caps Lock Light--> 
 
    </div> Caps<br>Lock 
 
</div>

しかしそれは動作しません。私がしようとしているのは、クリックするとキャップロックライトをオンにして、もう一度クリックすると元に戻すように切り替えることです。

Answer 1

注：clickイベントの終了が間違った場所で終了しているため、コードにJavaScriptエラーがあることに気付いただけです。

---

まあ別のブラウザのようなものを行うには具体的な方法は、カラーコードのためのさまざまな設定をそこに持っていないいくつかの用途がrgb()一部hexなど

私はむしろ、いくつかのクラスを作成することを提案して探しますその代わりのように：

.bg-red{ background-color:red; } 

$('body').on('click', '#caps', function(event){ 
    if ($(this).hasClass('bg-red')) { 
     $('.clight, #l2').css({ 
     'background-color' : 'red', 
     'box-shadow' : '0px 0px 20px yellow' 
     }); 
     event.preventDefault(); 
    } else { 
     $('.clight').css('background-color' , 'white'); 
    } 
}); 

Answer 2

私は解決策は非常に単純であることが判明：

$('body').on('click', '#caps', function(event){ 
     $('.clight, #l2').toggleClass('on'); 
});