Target Items In An Array On Click?

Bear in mind I'm a javascript/jquery/stackoverflow newbie. I have an array of JQuery objects (each one is an image). Right now I've got a separate function for each item in the arr

Solution 1:

$('.thumbnails img').click(function(){
    var $this = $(this);
    $('div#slide-container').fadeIn('fast');
    setTimeout(function(){
    $('div#slideshow').slideDown('fast');}, 200);
    setTimeout(function(){
    $this.fadeIn('fast');}, 500); });

Also I think you can use callback instead of setTimeout

$('.thumbnails img').click(function(){
    var $this = $(this);
    $('div#slide-container').fadeIn('fast', function(){
        $('div#slideshow').slideDown('fast', function(){
            $this.fadeIn('fast');
        });
    });
});

Solution 2:

You can write a general click handler for all the images that uses $(this) to refer to the element clicked on. To make it available in the setTimeout callback, you'll need to set a local variable to it, so it will be saved in the closure.

$(".thumbnails img").click(function() {
    var $this = $(this);
    $('div#slide-container').fadeIn('fast');
    setTimeout(function() {
        $('div#slideshow').slideDown('fast');
    }, 200);
    setTimeout(function() {
        $this.fadeIn('fast');
    }, 500);
});

UPDATE:

There's no need for the array. This version just assumes that the images in the slideshow are in the same position as the TDs containing the corresponding thumbnails, and uses .eq() to find them.

$("#thumbnails img.thumb").click(function () {
    var index = $(this).closest('td').index();
    $('div#slide-container').fadeIn('fast');
    setTimeout(function () {
        $('div#slideshow').slideDown('fast');
    }, 200);
    setTimeout(function () {
        $("div#slideshow img").eq(index).fadeIn('fast');
    }, 500);
});

DEMO

The reason $(this) wasn't being set earlier is because you had .thumbnails, and I copied that, but it should be #thumbnails. So the selector wasn't matching the elements.

Solution 3:

You can use jQuery selectors. In this case, you will use the 'ancestor descendant' (http://api.jquery.com/descendant-selector/) - Selects all elements that are descendants of a given ancestor.

This:

// Everything inside `.thumbnails` with tag `img`
$('.thumbnails img')

HTML (example)

<ulclass="thumbnails"><li><imgsrc="..."></li><li><imgsrc="..."></li><li><imgsrc="..."></li><li><imgsrc="..."></li></ul>

jQuery

(function($){
  $('.thumbnails img').on('click',function(e){
     e.preventDefault();
     // do someting...
  });
})(jQuery);