remove class from current group

Question

The easiest way to see the problem is checking the code here: http://www.studioimbrue.com/beta

What I need to do is once a thumbnail is clicked, to removed the "selected" class from all other thumbnails that are in this same or without removing them from the other galleries on the page. Right now, I have everything working except the class removal. Someone helped me in another question but wasn't quite specific enough (my javascript skills aren't all that great!) I'm using jQuery. Thanks for the help.

Well in that case, I'm not sure why this doesn't work properly:

$(document).ready(function(){ 
    var activeOpacity   = 1.0,
        inactiveOpacity = 0.6,
        fadeTime = 100,
        clickedClass = "selected",
        thumbs = ".thumbscontainer ul li img";

    $(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

You should take a look at

jQuery.removeClass()

So the point would be to first iterate trough all the images and unset the classname and than set the class on the active one.

Answer 2

I see you're using jQuery (and have edited your question accordingly).

With jQuery, it's really easy to get a list of matching elements using CSS syntax:

var list = $('#parentId > .selected');

That gets a list of the direct children of the element with the ID "parentId" that have the class "selected". You can then do things with them, such as:

list.removeClass("selected");

Then add "selected" to the element you want to select.

Edit I think this should do it:

$(thumbs).click(function() {
     // Remove selected class from any elements other than this
     var clicked, previous;
     clicked = $(this);
     if (!clicked.hasClass(clickedClass)) {
         previous = $(thumbs+'.'+clickedClass);
         previous.removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity);
         clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
     }
 });

I'm assuming there that the "selected" class isn't necessary for the fade effect to look right.

Note how the above will completely ignore the click if the clicked element already has the class. If you don't want that, remove the hasClass check and add .not(clicked) to the end of the previous = $(thumbs+'.'+clickedClass) line, but I don't know what your fade in would do at that point if you've already done it once.

I'm not getting the hover stuff; I thought you wanted this to happen on click, not hover.

Answer 3

Use .closest('.jcarousel-clip') to get the parent div, then find all the thumbnails and use .removeClass('selected').

Answer 4

Hi Andy it isn't clear your question, but I am going to try to help you. I am trying to help, and my skills on javascript arent that good either, plus I am not sure if I undertood the question right, please, dont vote me down.

     function focusme(){
         document.getElementById("focusme").focus();
       }
     function changeToCurrent(obj){
         var menucont = document.getElementById('menu');
         var arrLink = menucont.getElementsByTagName('a');
        for (var i = 0 ; i < arrLink.length; i++){
             arrLink[i].className=''; 
          }
          obj.className = "current";
         }



<div class="menu" id="menu" >
     <a  href='' id='focusme' onclick='changeToCurrent(this)'>link1</a>
     <a  href='' onclick='changeToCurrent(this)'>Once Only link2</a>
     <a  href='' onclick='changeToCurrent(this)'>link3</a>
     <a  href='' onclick='changeToCurrent(this)'>link4</a>
     <a  href='' onclick='changeToCurrent(this)'>link5</
     <a href="">link6</a>
</div>

Hope it helps.