jQuery的Changin DIV背景色

Question

I have two DIV, and i want to change DIV color to green when its clicked (its working). Im counting the clicks on div, and i want to stop counting if the DIV is already green.

 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> 

So, if the background is red (250,0,0) then recolor the div to green and change div text to 1. But if the div is not red (so already colored), and if i clicked on the green div then show the alert message. Any ideas how can I fix that? I guess with my IF is wrong.

Answer 1

Use CSS classes when you want to add/remove styling:

CSS

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

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

Javascript

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