JQuery Selector for hasClass or Previously Clicked Element

Question

Basically I am combining a filter/sort script with a gallery/thumbnail script. Everything works well apart from changing the opacity of the elements when clicking on the new image. ie. Click on new thumbnail, fades to 1.0, old one fades to 0.3.

I can solve one problem only to have another take place.

For example:

I can get the previous element to fade back to 0.3 opacity and the new element to fade in to 1.0, but only by selecting the entire list using: #thumbs ul.thumbs li. This works perfectly but when the filter kicks in and you have only 3/9 list items showing, when you click on another thumbnail, everything fades back to 0.3, causing all of the thumbnails to reappear.

I was thinking of using a counter to add a class to the clicked item, which then if that class is applied, the element will fade back to 0.3 and the class is then removed. Something like this.

$("#thumbs ul.thumbs li").click( function()
{
    if($("#thumbs ul.thumbs li").hasClass("counter")) {
        $("#thumbs ul.thumbs li").fadeTo('fast', 0.3);
        $(this).removeClass("counter");
    }
    $(this).addClass("counter");
    $(this).fadeTo('fast', 1.0);
});

I know exactly where my problem is. Trying to fade the list back to 0.3. I cannot think of the selector to use that will pick that one class that has the counter and then fade it back. I tried this but of course that applies to the clicked item.

I want to choose the element that has the counter style applied #thumbs ul.thumbs li .counter and then fade that particular items li element back to 0.3.

The reason why it has to be this is the gallery/thumbnail script forces the opacity on the elements li. Now I have tried to work my way through to find that but I cannot, so I thought to write a script to overwrite it.

As I mentioned above, I got it to work without taking the filter into account.

Another option I was thinking of was trying to find the previously clicked item and applying the opacity to that list item.

I am using Galleriffic Example 2 - Thumbnails and Gallery along with MixitUp.

I knew there would be incompatibilities but I have gotten it all to work apart from the opacity. So so so so close now.

Any help would be greatly appreciated. I can provide more info if needed.

I believe all I am missing is the correct selector. I am just at that stage where I cannot get myself out of the hole that is preventing me from thinking of the right selector. I am so close but I just cannot think of it. I know it will end up being something simple and I will kick myself for writing all of this. The DOM is frustrating me. Trying to get the parents and siblings all correct whilst following the gallery/thumbnails code.

Cheers

EDIT:

Using Jack Donnelly's method below, I was able to fix the problems I was facing. However, the thumbnail was still being added to the list even if it did not have a matching filter. This works but I would like to make it so that I dont have to call the code each time for each filter:

if ($("#filter-controls li.web").hasClass("filter-selected")){
    if ($(this).hasClass("web")){
        // Select our `li` element with the `.counter` class
        var $counter = $("#thumbs ul.thumbs li.counter");
        // Check whether this element exists
        if ($counter.length > 0) {
            // If it does exist, make it fade out
            $counter.fadeTo('fast', 0.3);
            // Finally, remove the counter class from our counter element
            $counter.removeClass("counter");
        }
        $(this).addClass("counter");
        $(this).fadeTo('fast', 1.0);
    }
}

I have come across this below but am having trouble implementing it with my existing code:

jQuery: How to check if two elements have the same class

EDIT: I ended up fixing this by removing the fadeto and using a class instead. Although I dont like using !important, it is really the only way without a massive headache in this case.

$("#thumbs ul.thumbs li").click( function()
{
    var $counter = $("#thumbs ul.thumbs li.counter");
    // Check whether this element exists
    if ($counter.length > 0) {
        $counter.removeClass("counter");
    }
    $(this).addClass("counter");
});

CSS has this:

.counter {
    opacity: 1.0 !important;
}

This is nice and simple, and the class does not reset when using the filter, keeping the opacity at 1.0 on the currently selected project.

A better outcome than expected.

Answer 1

This part of your code is where your problem lies:

if($("#thumbs ul.thumbs li").hasClass("counter")) {
    $("#thumbs ul.thumbs li").fadeTo('fast', 0.3);
    $(this).removeClass("counter");
}
$(this).addClass("counter");

This code:

1. Checks whether any of your li elements pulled by the #thumbs ul.thumbs li selector have a .counter class;
2. If so, it then fades all the li elements to 0.3 opacity;
3. It then removes the .counter class from this, rather than the element which has the .counter class;
4. It then gives the .counter class back to this.

The this within your if statement refers to the li element which was clicked on; not the li element which has the .counter selector.

Without seeing your code in action, I can't give a 100% accurate answer, however I can make a guess that this is what you'll need:

// Select any li element with the counter class
var $counter = $("#thumbs ul.thumbs li.counter");

// Check whether any $counter elements exist
if ($counter.length > 0) {
    // If they does exist, make them fade out
    $counter.fadeTo('fast', 0.3);

    // Finally, remove the counter class from them
    $counter.removeClass("counter");
}

// Add the counter class to the li element which was clicked on
$(this).addClass("counter");