Javascript / JQUery Dynamic Variable Access

Question

I have a javascript variable which is referencing a complex object (it is a slideshow control but that's not important)

e.g.
var slideshow = new SlideShow();

Because i have multiple slideshows on the page and I want to make accessing certain operations generic/reuse code in different pages.

I WANT TO BE ABLE TO ACCESS DIFFERENT VARIABLES CONTAINING DIFFERENT INSTANCES OF THE SLIDESHOWS IN THE SAME JAVASCRIPT ROUTINE. THE VARIABLE USED IS DIFFERENT DEPENDING ON WHAT SLIDESHOW IS BEING CONTROLLED AT THE TIME.

So instead of

slideshow.playSlides();

do something like

[dynamically get reference to variable containing slideshow].playSlides();

I've looked into this before in JavaScript and not found a solution, I'm wondering if this can be done in JQUERY somehow?

Answer 1

If it's a global variable, you can use the window object:

var name = 'slideshow';
window[name].playSlides();

Usually this kind of thing isn't necessary though - you should probably be passing around your slideshow variable. What are you trying to achieve?

Answer 2

Well... something has to contain the variable, so that's the question you need to answer first. My thought would be to store it in a hash, which, may not look much different to you at first:

var slideshows = {};    
slideshows['someslideshowName'] = new SlideShow();

But now you can reference by name with no issues.

or it could look like....

window.slideshows = {};
var slideShowName = 'someSlideShowName';
window.slideshows[slideShowName] = new SlideShow();

Answer 3

If I understand the question, why not create an array of slideshows and enum them so you have 0 to N slide shows and not need to recode.

var slideshows = [new SlideShow()];

function playSlides() {
   for(var i=0; i < slideshows.length; i++) {
       slideshows[i].playSlides();
   }
}

Answer 4

I'm going to add a completely different solution that I think makes a whole lot more sense:

As I said, something has to contain the variable

If it's a control which which is rendered by the browser. I would hang the instance off of the element which represents the control. Ideally, you're assigning some sort of class to the element. So, it's pretty straightforward after that.

$('.theslideshowclass').each(function() {
   this.slideshow = new SlideShow();
});

That's a jQuery style solution. I'm disappointed I didn't do it that way the first time.