Remove class from all other list items

Question

I got help from others about this, but their answers were a little too broad to help me ... I am new when it comes to javascript, so I cannot completely fool their answers (and all that I have tried in the last 3 days, it didn’t work.) The working site is here: http://www.studioimbrue.com/beta The problem is that with the help of thumbnails, clicking on them, it correctly adds the .selected class, but when you click on another it doesn’t can remove the .selected class from any other sketch. If you can just fix the code that I have, that would be awesome, and if you want to explain that I was wrong, go straight ahead!

$(document).ready(function(){ var activeOpacity = 1.0, inactiveOpacity = 0.6, fadeTime = 100, clickedClass = "selected", thumbs = "#list li"; $(thumbs).fadeTo(1, inactiveOpacity); $(thumbs).hover( function(){ $(this).fadeTo(fadeTime, activeOpacity); }, function(){ // Only fade out if the user hasn't clicked the thumb if(!$(this).hasClass(clickedClass)) { $(this).fadeTo(fadeTime, inactiveOpacity); } }); $(thumbs).click(function() { // Remove selected class from any elements other than this var previous = $(thumbs+'.'+clickedClass).eq(); var clicked = $(this); if(clicked !== previous) { previous.removeClass(clickedClass); } clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity); }); }); 

Answer 1

I think it is so simple:

 $(thumbs).click(function() { var li = $(this); var alreadySelected = li.hasClass('selected'); // Remove selected class from any elements other than this $('#list li').removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity); li.addClass(clickedClass).fadeTo(((alreadySelected) ? 0 : fadeTime), activeOpacity); }); 

You do not need to figure out which elements the class already has, just remove it from all and then re-add it to the one that was clicked.

Edit: this should remove the flicker.

Answer 2

If you mean sketches of people, they work great for me. Although some menu items do not work.