Цвет фона Changin DIV с jQuery

Question

У меня есть два DIV, и я хочу изменить цвет DIV на зеленый, когда его щелкнули (его работа). Im подсчитывает клики на 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, затем отобразите предупреждающее сообщение. Любые идеи, как я могу это исправить? Я предполагаю, что мой 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'); 
}