Add/remove class on click to change background color of a div

Question

I've been trying to get a little black div to change color to green on click and change it back to black on the next click. I want it to keep doing this.

Unfortunately it doesn't seem to work and through checking other topics on this I couldn't find my answer.

My HTML:

<div id="block"></div>

My CSS:

   div
    {
        width: 100px;
        height: 100px;
        background-color: black;
    }

My jQuery:

  $(function(){
    $("#block").click(function(){

        if($(this).hasClass("faded") == false)
        {
            $(this).css("background-color", "green", function(){
            $(this).addClass("faded");
            });
        }
        else
        {
            $(this).css("background-color", "black", function(){
                $(this).removeClass("faded");
            });
        }
    });
    });

Basically I'm trying to let it check whether my block has a certain class, if not add it and change the background color in my css to green. If it does have the class (which it will when it's green), remove it and change the background color in my css back to black.

JSfiddle: http://jsfiddle.net/sVZtL/

Thanks in advance guys!

Solution 1

Hope this fiddle helps you : http://jsfiddle.net/rachit_doshi/sVZtL/8/

$(function(){
$("#block").click(function(){

    if(!$(this).hasClass("greenDiv")) {
        $(this).addClass("greenDiv");
    } else {
        $(this).removeClass("greenDiv");
    }
});
});

Solution 2

Try this:

$(document).ready(function(){
 $('#block').on('click', function() {
  $(this).toggleClass('faded');
 });
});

And put background-color: green for your faded class.

However it might not work depending on your jQuery version.

Working JSFiddle: http://jsfiddle.net/sVZtL/12/

Solution 3

Hope this fiddle may help you little bit : http://jsfiddle.net/vishwa26/VCUvF/

$("div").click(function() {
//var $thisBtn = $(this);
if($("div").hasClass("btn-color")) {
    $("div").removeClass("btn-color");
    $(this).addClass("btn-color");
}
else {  
    $(this).addClass("btn-color");
}
 });

Comments

[Joren Broekema]

Thanks for the reply, this however doesn't seem to work. I tried to see by inspecting the element whether a class is added/removed but this doesn't seem to work. Perhaps someone could edit my JSfiddle to see if they can fix it?

[Cyrille Armanger]

Hello Joren, I have updated your JSfiddle, it was because jQuery was not defined in the left panel. It is working now!

[Joren Broekema]

Thanks a lot Rachit! I should be able to work from that. Perhaps the exclamation marks fixed it?

[Rachit Doshi]

That $(this).hasClass("greenDiv") returns either true or false, and ! is same as not true or blank or false Also if my answer was useful, then you should accept the answer

[Joren Broekema]

A small follow-up question: Say I have another block and I want it to change the color of another block by clicking it. That doesn't really seem to work for me Edit: never mind, I did just make that work!

[Pavel Gruba]

I think single-line call to toggleClass is better than 3-line code that does the same