Question

>> JSFIDDLE <<

var imgFilterBtn = $("nav > ul > li > ul > li > a");

$("img").fadeIn("slow");

imgFilterBtn.click(function() {
    var fadeInClass = $(this).attr("id");
    var wrongFilter = $(this).parent("li").parent("ul").children("li").children("a");

    wrongFilter.removeClass(); // un-style all links in one sub-list
    $(this).toggleClass("selected"); // style selected link


    var wrongFilterID = wrongFilter.attr("id");
    $("#imgWrap").removeClass(wrongFilterID); // remove all classes from imgWrap that are equal to an ID all LI-items in  the current list


    $("#imgWrap").toggleClass(fadeInClass); // toggle the class that is equal to the ID of the clicked a-element

    $("img").hide(); // hide all images

    var imgWrapClass = $("#imgWrap").attr("class");
    $("#imgWrap").children("img." + imgWrapClass).fadeIn("fast"); // fade in all elements that have the same class as imgWrap
});   

I have done my best to include comments that explain what the script is doing.

1. What works:

• The images fade in on document load
• The “selected” class is toggled (but not toggled BACK!)
• The class on #imgWrap is toggled, but doesn’t get toggled back
• Images are hidden and show when a list-item (actually its parent li) is clicked

---

2. What does not work

• When a li-item is clicked, the other classes don’t get deleted
• Things mentioned above

---

3. What should happen
When a user clicks a link, the ID of that linked is passed on to a class which is assigned to #imgWrap. But before this class is assigned, all other classes that are the same as the ID’s of other list items of THE SAME LIST (so not of another list) get deleted. So, when you click black and fashion, and then brown #imgWrap should have the classes fashion and brown, and black should have been deleted.

I am guessing I am missing an each function but I’m not sure.

Answer 1

The problem seems to be that wrongFilter contains all a elements of that particular list and wrongFilter.attr("id") will always select the ID of the first selected element.

Regarding the toggling: If you select the element that is already selected, you first remove the selected class and then add it again. Similar to the class added to #imgWrap.

Restrict the selection to the actual selected element and fix the class adding/removal:

// ...
// Only get the currently selected element
var wrongFilter = $(this).closest('ul').find('a.selected');
var wrongFilterID = wrongFilter.attr("id"); // get its ID

// toggle `selected` for the previous selected element and the current one;
// will remove the class if the previous selected element is the same as the
// current one 
wrongFilter.add(this).toggleClass('selected');

// ...

// if the class already exists, the same menu entry was clicked and we have 
// to remove the class
$("#imgWrap").toggleClass(fadeInClass, wrongFilterID !== fadeInClass);

// ...

But now it can be that wrongFilterID is undefined and the next call to removeClass would remove all classes form #imgWrap. So you have to add a test:

if(wrongFilterID) {
    $("#imgWrap").removeClass(wrongFilterID); 
}

Another problem is that imgWrapClass can be a space delimited string of classes, e.g. "fashion black", which means that

.children("img." + imgWrapClass)

will result in

.children("img.fashion black")

which is not what you want.

You have to create a proper selector from that string, e.g.:

// "fashion black" becomes "fashion.black"
var imgWrapClass = $.trim($("#imgWrap").attr("class")).replace(/\s+/g, '.');

---

With all that fixed, it seems to work properly:

DEMO