jQuery's addClass doesn't add a class

Question

I'm busy on a register form. One of the steps is to choose your gender:

reg

now, the desired result is, if someone clicks the male icon, the icon gets a blue color, and when someone clicks the female one, that one turns pink.

The color switching thing works when hovered, but not when clicked. This is my HTML:

<div id="submenugender">
    <div class="submenu"><div class="sprite male" id="setmale"></div></div>
    <div class="submenu"><div class="sprite female" id="setfemale"></div></div>
</div>

It seems pretty simple. So the .sprite class is loaded, which just sets de default height and width + it loads the sprite. Then the male and female classes are loaded, which contain a background-position element:

#registercontainer .submenu .male {
    background-position: -7px -462px;
}

#registercontainer .submenu .female {
    background-position: -60px -462px;
}

#registercontainer .submenu .male:hover, #registercontainer .submenu .male .active {
    background-position: -7px -397px;
}

#registercontainer .submenu .female:hover, #registercontainer .submenu .female .active {
    background-position: -60px -397px;
}

There are some ID's and stuff here that miss in the HTML, those are just wrappers for positioning.

As you see, I created an active class in CSS for when someone clicks. The position set there is the colored one. Now, when someone clicks an icon, I want it to see the active class, and change color. This is done by jQuery:

 $("#setmale").click(function() 
  {
      $('#registercontainer .submenu .male').addClass('active');
  });
  $("#setfemale").click(function() 
  {
      $('#registercontainer .submenu .female').addClass('active');
  });

But the stupid thing just won't work... Did I make any mistakes with the selector or anything?

Thanks.

@putvande #registercontainer is the absolute parent, everything is stored in there. It contains a seperate background and margins. It runs like this: #registercontainer -> #submenugender -> .submenu -> .sprite -> .male/.female — sushibrain
– sushibrain, Commented Dec 17, 2014 at 9:40

Tim B James · Accepted Answer · 2014-12-17 09:46:51Z

3

I really easy solution to what you have is to just change your css to this;

#registercontainer .submenu .male:hover, #registercontainer .submenu .male.active {
    background-position: -7px -397px;
}

#registercontainer .submenu .female:hover, #registercontainer .submenu .female.active {
    background-position: -60px -397px;
}

Notice that the .male.active and .female.active are chained together. Read more about css chaining

Also a little improvement to your JS code would be to change your click code to just $(this).addClass('active'); as $(this) is the element which raised the click event.

Your js is not at fault, ignore all the js answers sending you down a rabbit hole.

edited Dec 17, 2014 at 9:46

answered Dec 17, 2014 at 9:41

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

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

Comments

WhiteLine · Accepted Answer · 2014-12-17 09:36:14Z

0

try this :

$("#setmale").click(function() {
    $(this).addClass('active');
});
$("#setfemale").click(function() {
    $(this).addClass('active');
});

or

$("#setmale,#setfemale").click(function() {
    $(this).addClass('active');
});

answered Dec 17, 2014 at 9:36

WhiteLine

1,9832 gold badges25 silver badges53 bronze badges

1 Comment

athms Over a year ago

Makes more sense! You can improve this by using $('#setmale, #setfemale').click() of course...

kapantzak · Accepted Answer · 2014-12-17 09:39:55Z

0

$(document).on('click', 'div.submenu > .sprite', function() {
    var that = $(this);
    that.addClass('active');
})

If you want to activate only the clicked one:

$(document).on('click', 'div.submenu > .sprite', function() {
    var that = $(this);
    $('div.sprite').not(that).removeClass('active');
    that.addClass('active');
})

answered Dec 17, 2014 at 9:39

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Comments

Tim M. · Accepted Answer · 2014-12-17 09:47:59Z

0

Your JavaScript is fine (although it could be simplified). The problem is actually the CSS:

Wrong

#registercontainer .submenu .male .active // this will match a descendant of .male

Correct

#registercontainer .submenu .male.active // this will match .male that is also .active

Demo: http://jsfiddle.net/byb95u6p/

Simplified Version: http://jsfiddle.net/byb95u6p/1/

edited Dec 17, 2014 at 9:47

answered Dec 17, 2014 at 9:42

Tim M.

54.5k14 gold badges126 silver badges167 bronze badges

2 Comments

Tim B James Over a year ago

Is this not just the same as my answer?

Tim M. Over a year ago

@TimBJames - We posted within seconds of each other. I'll assume yours was a polite question and not an accusation.

atiquratik · Accepted Answer · 2014-12-17 09:44:02Z

-1

Rather than using .addClass(), You may use .toggleClass() which will help you to switch your class using single function.

And, make sure your selector is right.

answered Dec 17, 2014 at 9:44

atiquratik

1,3003 gold badges28 silver badges35 bronze badges

Collectives™ on Stack Overflow

jQuery's addClass doesn't add a class

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related