CODEWITHSUNDEEP
javascriptjqueryfor-loopwebswitch-statement
TheSilentDrifter
TheSilentDrifter

Reputation: 29

how do I properly incorporate arrays into for loops in jquery/javascript?

I am working on a custom gallery right now, but I cannot seem to get the array of variables to apply during the loop. What am I missing?

Here is the relevant code:

var racerImage = ['$("img.ryanthumb")', '$("img.pierthumb")', '$("img.jeremythumb")',
       '$("img.mattthumb")', '$("img.andrewthumb")', '$("img.alanthumb")',
       '$("img.kevinthumb")', '$("img.mikethumb")', '$("img.dougthumb")'];

var showMe= ['showRacer("ryan")\;', 'showRacer("pier")\;',
       'showRacer("jeremy")\;', 'showRacer("matt")\;', 'showRacer("andrew")\;',
       'showRacer("alan")\;', 'showRacer("kevin")\;', 'showRacer("mike")\;', 
       'showRacer("doug")\;'];

for (var i = 0; i < racerImage.length; i++)
{
    racerImage[i].click(function(){
        switch (i)
        {
            case 0:
                showMe[i];
                break;
            case 1:
                showMe[i];
                break;
            case 2:
                showMe[i];
                break;
            case 3:
                showMe[i];
                break;
            case 4:
                showMe[i];
                break;
            case 5:
                showMe[i];
                break;
            case 6:
                showMe[i];
                break;
            case 7:
                showMe[i];
                break;
            case 8:
                showMe[i];
                break;
        }
    });
}

Basically I am trying to use a for loop to apply the jquery multiple times instead of writing it over and over again. I don't know if I am going about this the right way, but any insights would be great. Thanks again!

Upvotes: 0

Views: 119

Answers (3)

StackSlave
StackSlave

Reputation: 10627

I would do this instead:

var racer = ['ryan', 'pier', 'jeremy', 'matt', 'andrew', 'alan', 'kevin', 'mike', 'doug'];
$.each(racer, function(i, v){
  $('img.'+v+'thumb').click(function(){
    showRacer(v);
  })
});

Upvotes: 1

jfriend00
jfriend00

Reputation: 707726

You ended up having three main problems:

  1. You have jQuery code strings in the racerImage array which end up being just strings, not actual jQuery objects so they don't work.

  2. You have function call code strings in the showMe array which don't work either.

  3. Your value of i in the click handler function doesn't work because the event handler happens some time later when the value of i is no longer what you want it to be.

To fix those, change the racerImage array to just an array of selectors and turn them into jQuery objects when needed in your code.

Change the showMe array into an array of names that you can just pass to the showRacer() function when needed.

And, you don't need the switch statement at all since i is already your index.

var racerImage = ["img.ryanthumb", img.pierthumb, "img.jeremythumb",
       "img.mattthumb", "img.andrewthumb" /* and so on */];

var showMe= ["ryan", "pier", "jeremy", "matt" /* and so on */];

for (var i = 0; i < racerImage.length; i++) {
    // create closure to capture the value of i so it is available during the event handler
    (function(i) {
        $(racerImage[i]).click(function(){
            showRacer(showMe[i]);
        });
    })(i);
}

Upvotes: 2

Joe Enos
Joe Enos

Reputation: 40413

racerImage[0] is still just a string which contains the value $("img.ryanthumb") - it is not the jQuery object.

What you probably want to do is put the selector value in the string, and then call the jQuery function from there:

var racerImage = ['img.ryanthumb', 'img.pierthumb', ...etc...];

...

$(racerImage[i]).click(function(){...});

Or you can have your array be the jQuery objects and use them:

var racerImage = [$("img.ryanthumb"), $("img.pierthumb"), ...etc...];

...

racerImage[i].click(function(){...});

EDIT

Thanks Joel for the comment - yep, same problem on showRacer - maybe those can be an array of functions:

var showMe= [function(){showRacer("ryan");}, function(){showRacer("pier");}, ...etc...];

...

showMe[i]();

Upvotes: 1

Related Questions