jQueryでChangin DIVの背景色

Question

私は2つのDIVを持っており、クリックしたときにDIVの色を緑色に変更したいと思います。私はdivのクリック数をカウントしています.DIVがすでに緑色である場合はカウントを停止します。

var counter = 0; 
 
$(function() { 
 
    $(".tile").click(function() { 
 
    if ($(this).css('background-color') == 'rgb(250,0,0)') { 
 
     $(this).css('background-color', '#008000'); 
 
     counter++; 
 
     $(this).append("/" + counter); 
 
    } else { 
 
     alert("Already colored!"); 
 
    } 
 
    }); 
 
});

div { 
 
    width: 90vh; 
 
    height: 10vh; 
 
    margin: auto; 
 
    border: 3px solid black; 
 
    padding: 25px 25px 25px 25px; 
 
    background-color: rgb(250, 0, 0); 
 
    display: table-cell; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='tile'></div> 
 
<div class='tile'></div>

背景が赤であれば、(250,0,0)は、緑のdivの色を変更し、1にdivのテキストを変更しかし、divが（そう、すでに色）、赤、と私場合ではない場合緑色のdivをクリックし、警告メッセージを表示します。任意のアイデアをどのように修正できますか？私のIFは間違っていると思います。

Answer 1

使用CSSクラスあなたはスタイリングを削除/追加したい：

CSS

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

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

Javascriptを

if ($(this).hasClass('red-bg')) 
{ 
    $(this).removeClass('red-bg') 
      .addClass('green-bg'); 
}