Returning a variable to use within another function in JQuery

Question

I'm making an image gallery, when I click a button I can scroll through to the next image.

I also have the option to 'jump' to a specific image. This all works fine.

However, if I scroll regularly to image 3, then jump to image 7. Once I click the next button, I don't go to image 8 as I would like to - I go to image 4. Because there are two separate functions, and I can't/ don't know how to pass the variable between them. I understand I can use a global variable outside of both functions, but this seems to be discouraged.

Here's an example:

var i = 0;
// i is a global variable

$("#next_button").click(function(){
   $(".all_images").eq(i).show();
   i++;
});

This would correctly increment through all of my images.

$(".thumbnails").click(function(){
    var x = $(this).index();
    $(".all_images:visible").hide();
    $(".all_images").eq(x).show();

i = x;
});

This shows the image relative to the thumbnail I have clicked.

So, how do I use the 'i' variable from the first function in the second function? This has always confused me. It just seems simpler to use a global variable so each function can change the value of i and use it when necessary. Please enlighten me.

Also, as I understand it's possible to wrap JQuery code in a regular JavaScript functions. It seems, however, that my code doesn't work when I wrap a JQuery .click in a regular JavaScript function (ie my_Function(){ ....$("#something").click.... }

Can anybody explain what I am doing wrong?

This should work - you should create a jsFiddle, supply more code or a live dev site if you have one. — Bill, Apr 17 '13 at 13:35
Sorry guys, it's a really simple query but looks like I've confused it. Here's the jsFiddle: http://jsfiddle.net/ywXEm/ — pixo-drone, Apr 18 '13 at 10:26

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

You have two options as in most programming languages:

Use a global variable (higher scope),
Pass by reference.

However, you can't really escaoe creating some kind of global variable (object or primitive) so I would suggest you make an object (maybe even key-value) that holdes all your program parameters.

In order to do this you could use the .data method like this to assign data to an arbitrary element:

setter : 
$('body').data('myvar','value');

getter:
$('body').data('myvar');

see: http://api.jquery.com/jQuery.data/

In order to pass by reference, you need to pass a object instead of a primitive. See following link(s) for more details:

edited May 23 '17 at 12:04

Community

1
1

answered Apr 17 '13 at 13:48

Menelaos

23,508
18
90
155

I see, thanks for the reply. I'll have a read through the links. In a small script, is this really necessary? It seems like overkill when all I need is a single global variable to keep track of a value that can be changed by multiple functions. – pixo-drone Apr 18 '13 at 12:28
For one variable it does seem a bit like overkill in my opinion. Usually .data is used for more complicated scripts to avoid fugly code. – Menelaos Apr 18 '13 at 12:47
I'll stick with a global variable in this case then. Thank you very much for your answer. – pixo-drone Apr 18 '13 at 18:52

Returning a variable to use within another function in JQuery

1 Answers1