CODEWITHSUNDEEP
javascriptjqueryarrays
LouisK
LouisK

Reputation: 1176

jQuery array element returning undefined inside click function

Please see update at bottom

I am 99% certain that my issue is scope, but I'm not sure WHY it's causing an issue. My understanding of scope in JS/jQuery is clearly not where it should be.

jsFiddle: http://jsfiddle.net/a3N2L/

Please forgive the semicolons, it's a force of habit carried over from PHP.

I have a dynamically created list of images, and as a learning exercise I'm trying to create a custom lightbox that allows you to scroll through them. (The film strip displaying thumbnails already works)

The links/href's for each are pushed into an array with this code (which seems to work fine): 

var imgArray = [];

$('.filmstrip a').each(function() {
    imgArray.push($(this).prop("href"));
})

Then comes the code to create the lightbox, which also works fine.

Inside the lightbox, I am attempting to use a for loop to apply the correct href to each left/right nav button based on the position of the current image within the array. It all seems to work the way I'd expect, until I try to use a click function on the links to fadeIn/Out the new image.

If I just set $('.next a').prop('href', imgArray[i+1]) it applies the correct link address, but obviously just loads the image independently.

The whole chunk that's beating me up is: 

if (imgArray.length > 1) {              
        for (var i = 0; i < imgArray.length; ++i) {

            if (i == 0) {

                $('.prev').hide();
                $('.next').show();

    // IF I REFERENCE imgArray[i] HERE, IT WORKS

                $('.next a').click(function(e) {
                    e.preventDefault();

    // INSIDE THE CLICK FUNCTION, imgArray[i] RETURNS UNDEFINED

                    $('#lightbox img').fadeOut('fast');
                    $('#lightbox img').prop('src', imgArray[i+1]);
                    $('#lightbox img').fadeIn('fast');
                });                 

            }               
        }
    }

Yes there are a few else if's and an else following that, but I didn't think I needed to include the extra 50 lines

Suggestions are very happily accepted!

UPDATE

per Chris Hardie's suggestion, I moved the click function outside the loop, and inside the loop used: var pos = imgArray[i]; break; in each condition, then used 

 $('.right a').click(function(e) {
e.preventDefault();

  $('#lightbox img').fadeOut('fast');
  $('#lightbox img').prop('src', pos);
  $('#lightbox img').fadeIn('fast');
 });

after the end of the loop, it seems to work, though I'm having some strange issues with what's in which array position and the associated conditions now, but I think I can figure that part out...

Unless somebody has a better way? I also updated the jsfiddle: http://jsfiddle.net/a3N2L/3/

Another update

Clearly my conditions are all wrong inside the loop, as I need to be comparing i to the current img URL (which is stored in another variable), instead of to a number...DUH

SOLVED

Thanks for the help :)

Final jsfiddle for future readers who may want the example: http://jsfiddle.net/a3N2L/4/

Upvotes: 0

Views: 1403

Answers (1)

Emil Borconi
Emil Borconi

Reputation: 3467

I'm not good in explaining this things, but, i will try to do it in plain english.

In your for loop everything is fine, We know what is imgArray and we know what is i, we then create a function which is triggered on the click event later. When that happens, we do not know i any more, and probably neither imgArray so you will get an error.

See this question for a similar issue with a better explanation than mine what is the problem.

Upvotes: 1

Related Questions