Question

I think the title is self-explanatory. What needs to happen is that when a user clicks a menu item, the images on the screen are filtered. This happens by only showing the images that have te same class as the ID of the clicked element. Here is the code of what I’ve tried so far:

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

imgFilterBtn.click(function() {
    $("img").fadeOut("fast");
    var fadeInClass = $(this).attr("id");

    $("img").hasClass(fadeInClass).fadeIn("fast");
});

I also tried putting the images in a wrapper and filtering them with children:

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

imgFilterBtn.click(function() {
    $("img").fadeOut("fast");
    var fadeInClass = $(this).attr("id");

    $("#imgWrap").children("." + fadeInClass).fadeIn("fast");
}); 

But this doesn’t work either! Any help on this? Thanks.

​

Answer 1

.hasClass() returns a boolean, not jQuery collection. You could use the class name in selector directly.

 var fadeInClass = $(this).attr("id");
 $("img."+fadeInClass).fadeIn("fast");