Jquery problem onclick add class and remove class

Question

first time posting here. I'm a beginner in jquery and i ran into some grey area. Hopefully i can find my answer here and learn from it also :)

So i have a let's say 10 different div. All has the same class. And everytime I click on the div it has to add another class (in this case background-color in css). For that I have this:

$(document).ready(function() {
$(".menucardmenu").click(function(){
        if($(this).hasClass("menucardmenu")) {
               $(this).addClass("backgroundmenucard");
    }
    else {
        alert ("condition false");
    }
  });
});

But the question now is, how can i make that only one div can have that background-color (in my case backgroundmenucard). Depending one which div the user click, that div will have the background-color, and the previous div (that was clicked) should reset it back to normal. I can do it with this right?:

$(this).removeClass("backgroundmenucard");

does anyone know the answer to this???

Regards, Andrew

@Sayem no, you are not wrong. You might even say you're right ;-) — Matt Ball
– Matt Ball, Commented Jun 11, 2011 at 19:47

Sotiris · Accepted Answer · 2011-06-11 19:45:07Z

4

try the following:

$(".menucardmenu").click(function(){
    $(".backgroundmenucard").removeClass("backgroundmenucard");
     $(this).addClass("backgroundmenucard");
  });

Demo: http://jsfiddle.net/r2Sua/

(I remove the if because it's useless in this case)

answered Jun 11, 2011 at 19:45

Sotiris

40.2k11 gold badges55 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Ng Over a year ago

This was exactly what I needed. Thx you very much. Yes I was looking into the if-else statement so I used it for the basic. After that I was unsure what the purpose was since I it already works

wdm · Accepted Answer · 2011-06-11 19:42:52Z

2

Remove from all...

$(".menucardmenu").removeClass("backgroundmenucard");

Then add to this

answered Jun 11, 2011 at 19:42

wdm

7,1891 gold badge31 silver badges31 bronze badges

Comments

Matt Ball · Accepted Answer · 2011-06-11 19:52:52Z

1

$(function() // shorthand for document ready
{
    var $divs = $('div.menucardmenu'), // standard jQuery "cache" idiom
        BG_CLASS = 'backgroundmenucard'; // stay DRY, less prone to typos

    $divs.live('click', function() // use .live to bind only 1 event listener
    {   
        // remove the class from all divs
        $divs.removeClass(BG_CLASS);

        // add the class to this div
        $(this).addClass(BG_CLASS);
    }
  });
});

The if($(this).hasClass("menucardmenu")) check is completely unnecessary since you're already selecting elements which have that class. It will always evaluate to true.

edited Jun 11, 2011 at 19:52

answered Jun 11, 2011 at 19:44

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Comments

Sunny · Accepted Answer · 2011-06-11 19:43:39Z

0

$('.menucardmenu').click(function(){
 $('.menucardmenu').removeClass('backgroundmenucard');
 $(this).addClass('backgroundmenucard');
});

answered Jun 11, 2011 at 19:43

Sunny

6,3462 gold badges27 silver badges27 bronze badges

Comments

Thiago Belem · Accepted Answer · 2011-06-11 19:44:20Z

0

Another option would be:

$(".menucardmenu").not(this).removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");

This way you don't remove and add the class to the specific (this) element

answered Jun 11, 2011 at 19:44

Thiago Belem

7,8325 gold badges47 silver badges65 bronze badges

1 Comment

Matt Ball Over a year ago

You're adding the class to this no matter what, so it really doesn't make a difference.

Collectives™ on Stack Overflow

Jquery problem onclick add class and remove class

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related