0

I'm currently working on a sliding animation within a grid. One of the components of said slider, is that I need users to be able to click on certain elements, and stop the animation.

The issue I'm running into is in setting up globally scoped objects, that I can then manipulate elsewhere.

In my code I'm looping through the markup, and creating a new object for every div with a class of .multi that it finds, and attaching it to that element. Im then attempting to create a uniqueName for each, but when I attempt to use the uniqueName variable's value, it just redefines uniqueName itself.

Any idea how to get the value of the variable and utilize that as the new name for the global variable referencing the object?

function Slider(element) {

    this.i = 0;

    this.element = element;

    var self = this;

    this.timer = window.setInterval(function() {
        switch (self.i) {
            case 0:
                element.velocity({ translateX: "-33.333333%" }, { duration: 750, delay: 4000}, "easeOut");
                self.i++;
            break;
            case 1:
                element.velocity({ translateX: "-66.666666%" }, { duration: 750, delay: 4000}, "easeOut");
                self.i++;
            break;
            case 2:
                element.velocity({ translateX: "0%" }, { duration: 750, delay: 4000}, "easeInQuart");
                self.i = 0;
            break;
        }
    }, 5000);
}

Slider.prototype.stop = function() {
  window.clearInterval(this.timer);
}

Slider.prototype.click = function() {
  var self = this;

  this.element.click(function() {
    self.stop();
    console.log(self);
  });
}

var counter = 0;
var name = "slider_";
$(".multi").each( function(){
    var uniqueName = name + counter;
    console.log(uniqueName);
    window.uniqueName = new Slider($(this));
    counter++;
});

What I need to do is use the value of uniqueName, as is being console.logged, as the namespace for the globally defined variable. But I have absolutely no idea how to do this.

Jordan Whalen
  • 268
  • 2
  • 12
  • I'm not using objects, or key value object pairs that are't resolving. I'm trying to use a dynamically defined variable value as the name for a new object. – Jordan Whalen Sep 26 '15 at 00:39
  • A better duplicate might be [How do I add a property to a Javascript Object using a variable as the name?](http://stackoverflow.com/q/695050/218196), but the current one also contains the information you need. – Felix Kling Sep 26 '15 at 00:45
  • I honestly cant understand either of these posts. Im not using an object, whose value I need to pull out. I'm using a variable whose value I need to use as the name for a different object. – Jordan Whalen Sep 26 '15 at 00:46
  • I want to be able to type "slider_0" into the console, and have it return back an object. – Jordan Whalen Sep 26 '15 at 00:47
  • You didn't look at the link I posted, did you? If you assign the property as suggested in the linked questions, i.e. `window[uniqueName] = ...` (instead of `window.uniqueName = ...`) then you will be able to do that. – Felix Kling Sep 26 '15 at 00:48
  • 1
    Sweet jesus. I did, but forwhater reason I wasnt removing the . by window. I was typing window.[uniquename]. Anyways, thanks! – Jordan Whalen Sep 26 '15 at 00:53

0 Answers0