Trouble accessing the right selectors

Hi Chris,

The basic problem is that when you call $('.gallery-item img') jQuery has no way of knowing which one you are referring to. When you ask if for the alt attribute and save it to a single variable, it just picks the first one, and when you show or hide, it shows or hides all of them.

The cure for these cases is jQuery's .each.

$('gallery-item img').each(function() {
    var title = $(this).attr('alt');
    //rest of code goes here
});

Casey is correct. You'll also have to use the correct image selector to hide or show the image you want, as currently your code will show all images or hide all images based on the conditional.

As an alternate, you can do something like the following to hide all images, then show only the images that match the alt attribute:

var imageToShow = $('.gallery-item img[alt]').filter(function() {
    return this.alt.toLowerCase() == $searchInput.toLowerCase();
});
$('.gallery-item img').hide();
imageToShow.show();

This will also support multiple images with the same alt attribute.

I might be misunderstanding but it sounds like you're asking for two things: show all images until the user types in an exact match, and then show only those that match; and show all images that have a partial or full match to the user input.

If you're looking to show all images until the user's input exactly matches an alt value, then you'd change the hide() on all images to show(), then look to see if the count of matched selectors (imageToShow) is greater than 0 (meaning there was at least one match found):

  $('.gallery-item img').show(); // show all img by default
  if (imageToShow.length > 0) { // if the filter function has found image(s) with an 'alt' value equal to the user's input
        $('.gallery-item img').hide(); // hide all images
        imageToShow.show();  // show only the image(s) that had a matching alt value
  }

If you want to show all images with an alt value that has a partial or full match to the user input, you'd need to change the filter function to look for an occurrence of the search string within any of the alt values, rather than looking for an exact match:

   var imageToShow = $('.gallery-item img[alt]').filter(function() { 
        return this.alt.toLowerCase().indexOf($searchInput.toLowerCase()) !== -1; 
    });

To make it easier to read:

   var imageToShow = $('.gallery-item img[alt]').filter(function() { 
        var altValue = this.alt.toLowerCase();
        var userInput = $searchInput.toLowerCase();
        return altValue.indexOf(userInput) !== -1; 
    });

What this does is try to find the position of the first occurrence of userInput in altValue.

So say you have four images with the following alt values: Lion Liger Leopard Alligator

If you type in "L", you will see all four images, because they all contain the letter 'L'.

if you type in "Li", you will only see three images; "Leopard" will not show.

If you type in "Lig", only "Liger" and "Alligator" will show.