jQuery - Change color on click

Question

I'm looking at some jQuery because I want to create a div that changes color when you click it.

And I've done that with:

$(function() {  
$('.star').click(function(){
    $(this).css('background', 'yellow');

  });
});

And it works perfectly! But I want it to remove the background color, when you click it one more time. Is that possible, and how would you do something like that?

Answer 1

Create a CSS class:

.clicked {
  background-color: yellow;
}

and then simply toggle that class it via jQuery:

$('.star').click(function(){
  $(this).toggleClass('clicked');
});

Answer 2

You could set a flag in your click function, Then add an if statement

if hasBeenClicked = true;
//...background color remove
else
//....background color changed to yellow

hasBeenClicked = true;