Add and remove multiple classes using jQuery

Question

<div id="siteFeelingBannar" class="shadowVeryMild"> <ul> <li><div class="autologinImage"></div><span class="statusHover">Affectionate</span></li> <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Annoyed</span></li> <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Anxious</span></li> <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Chatty</span></li> <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Content</span></li> <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Curious</span></li> <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Ecstatic</span></li> <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Excited</span></li> <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Free</span></li> </ul> </div> 

I have the above code snippet that gives a drop down list so people can choose their current feeling.

You will notice that the first li slightly different from the rest:

  <li><div class="autologinImage"></div><span class="statusHover">Affectionate</span></li> 

This is the currently selected li , because it does not have a div.hidden class (adds the img - tick mark to show the selected), and it does not have the span.autologinMargin class (gives the other li elements have the required interval so that they all are in the queue).

I am trying to write jQuery so that it can switch. for example: if someone clicks on another li , then div.hidden and span.autologinMargin , and in the previous selected these 2 classes are added.

Can someone help me give a push in the right direction with this code.

Answer 1

That should work.

 $('#siteFeelingBannar li').click(function(){ // Add the class to div and spans $(this).siblings().find('div').addClass('hidden'); $(this).siblings().find('span').addClass('autologinMargin'); // Remove the classes from div and span. $(this).find('div').removeClass('hidden'); $(this).find('span').removeClass('autologinMargin'); }); 

Answer 2

Simplify it by adding a class to li and then style with child selectors.

Thus, all you have to do is add / remove a class from li , not stream elements.

 var lis = $('#siteFeelingBannar li').click(function() { lis.not('.hidden').addClass('hidden'); $(this).removeClass('hidden') }); 

---

 <div id="siteFeelingBannar" class="shadowVeryMild"> <ul> <li><div class="autologinImage"></div><span class="statusHover">Affectionate</span></li> <li class="hidden"><div class="autologinImage"><span class="statusHover">Annoyed</span></li> <li class="hidden"><div class="autologinImage"><span class="statusHover">Anxious</span></li> <li class="hidden"><div class="autologinImage"><span class="statusHover">Chatty</span></li> <li class="hidden"><div class="autologinImage"><span class="statusHover">Content</span></li> <li class="hidden"><div class="autologinImage"><span class="statusHover">Curious</span></li> <li class="hidden"><div class="autologinImage"><span class="statusHover">Ecstatic</span></li> <li class="hidden"><div class="autologinImage"><span class="statusHover">Excited</span></li> <li class="hidden"><div class="autologinImage"><span class="statusHover">Free</span></li> </ul> </div> 

---

 #siteFeelingBannar > ul > li { ... } #siteFeelingBannar > ul > li > div.autologinImage { ... } #siteFeelingBannar > ul > li > div.autologinImage > span.statusHover { ... } #siteFeelingBannar > ul > li.hidden { ... } #siteFeelingBannar > ul > li.hidden > div.autologinImage { ... } #siteFeelingBannar > ul > li.hidden > div.autologinImage > span.statusHover { ... } 

Answer 3

You can use code that adds a class to all .autologinImage elements and then removes them from the click element:

 $("#siteFeelingBannar .autologinImage").click(function() { $(this).closest("ul").find(".autologinImage").addClass("hidden"); $(this).removeClass("hidden"); }); 

You can see how it works here: http://jsfiddle.net/jfriend00/ECrHP/

You will also have to fix the <div> mismatch in your first <li> in your HTML. <span> should be inside the <div> , and not after it, like everyone else.

There is no need to dynamically add / remove the autologinMargin class, since you can only control this with CSS based on whether the parent is hidden or not. In fact, you probably don't even need this class. Just set the default rule and override it if .hidden is above it.

If you want to move the classes that are now in the div to li and adjust the CSS accordingly, then the code could be even simpler:

 $("#siteFeelingBannar li").click(function() { $(this).removeClass("hidden").siblings().addClass("hidden"); }); 

Answer 4

Earlier answers do not notice that the classes are on a nested <div> , not a <li> .

 $("#siteFeelingBannar li").click(function() { $(this).find("div").removeClass("hidden").end().find("span").removeClass("autologinMargin"); $(this).siblings().find("div")addClass("hidden").end().find("span").addClass("autologinMargin"); }); 

Answer 5

You can just try the switch class property built into jquery.

 $('.classname').hover( function(){ $(this).stop(false, true).switchClass("classname"); }, function(){ $(this).stop(false, true).switchClass("2ndclassname); }); 

This is an example.

Answer 6

You can add a class to the selected li , say selected . You can then use this to find the selected li and add the appropriate classes to your children.

Something like that:

 $(".selected").find("autologinImage").addClass("hidden").end() .find("statusHover").addClass("autologinMargin").end() .removeClass("selected"); 

I would rather define your css instead so you don't have to remove and add these classes. Something like that:

 .autologinMargin{ visibility: hidden; } .selected .autologinMargin{ visibility: visible; } 

In addition, using visibility will allow you to keep the margin stable, since the image will still occupy a space.

Answer 7

Here is a working example .

 $('#siteFeelingBannar li').on('click', function() { if (!$(this).children('.autologinImage').hasClass('hidden')) { // Do nothing } else { $('.autologinImage').not('hidden').addClass('hidden'); $(this).find('div.autologinImage').removeClass('hidden'); } });