CODEWITHSUNDEEP
javascriptjqueryarrays
Justin
Justin

Reputation: 1329

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 array:

var $photos = [];
$photos.push($('img.one'), $('img.two'), $('img.three'), $('img.four'), $('img.five'),              $('img.six'));
$('.thumbnails img.two').click(function(){
    $('div#slide-container').fadeIn('fast');
    setTimeout(function(){
    $('div#slideshow').slideDown('fast');}, 200);
    setTimeout(function(){
    images[1].fadeIn('fast');}, 500);
});

In other words I have the above code for each of the 5 indexes in the array. How can I write this so that I can target whichever photo is clicked using just one function instead of six? So instead of "images[1]" specifically, I can just say "images[i]".

Here's a link to a live version of this:

http://www.noticeeverything.com/photos/

Upvotes: 0

Views: 231

Answers (3)

Barmar
Barmar

Reputation: 781068

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.

Upvotes: 1

E. S.
E. S.

Reputation: 2919

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)

<ul class="thumbnails">
  <li><img src="..."></li>
  <li><img src="..."></li> 
  <li><img src="..."></li>
  <li><img src="..."></li>
</ul>

jQuery

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

Upvotes: 0

standup75
standup75

Reputation: 4814

$('.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');
        });
    });
});

Upvotes: 1

Related Questions