Question

I’ve gotten help from others on this, but their replies were a little bit too broad to help me… I’m a newb when it comes to javascript so I can’t quite wrap my head around their answers (and everything I’ve tried in the last 3 days hasn’t worked.) The working site is here: http://www.studioimbrue.com/beta The problem is that with the thumbnails, once clicking them it adds the .selected class properly but when clicking on another, it fails to strip the .selected class from any of the other thumbnails. If you can just correct the code I have that would be amazing, and if you feel like explaining what I had wrong, go right 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’s as simple as this:

$(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 don’t need to calculate which items already have the class, just remove it from all of them then re-add it to the one that’s been clicked.

Edit: this should remove the flicker.