JQuery addClass does not add class

Question

I am busy with the registration form. One of the steps is choosing your gender:

Now, the desired result: if someone clicks on the man’s icon, the icon gets a blue color, and when someone clicks on the woman’s icon, it turns pink.

The color switch function works when it hangs, but not when pressed. 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> 

Seems pretty simple. Thus, the .sprite class is .sprite , which simply sets the default height and width +, it loads the sprite. Then the male and female classes are loaded that contain the 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 identifiers and other things that are missing in HTML, these are just wrappers for positioning.

As you can see, I created an active class in CSS when someone clicks. The position set there is colored. Now, when someone clicks on the icon, I want him to see the active class and change the color. This is done using 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 ... Have I made a mistake with the selector or something else?

Thanks.

Answer 1

I really easily decide what you have - 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; } 

Note that .male.active and .female.active connected together. More on css chaining

Also, a slight improvement in your JS code will be to change your click code only to $(this).addClass('active'); since $(this) is the element that raised the click event.

Your js is not to blame, ignore all js answers, sending you down the rabbit hole.

Answer 2

try the following:

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

or

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

Answer 3

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

If you want to activate only , click the button:

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

Answer 4

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

Wrong

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

Right

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

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

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

Answer 5

Instead of .addClass() you can use .toggleClass() , which will help you switch your class with a single function.

And make sure your selector right.