CODEWITHSUNDEEP
jquery
Rebecca O'Riordan
Rebecca O'Riordan

Reputation: 883

Simple click event on a variable

I have a number of variables which are assigned to div id's, and I want to loop through them. At the moment I can't pass the right value to the variable:

var video0, video1, video2;
video0 = '#div0';
video1 = '#div1';
video2 = '#div2';

for (i = 0; i <= 3; i ++) {
  $(video+i).click(function(){
      setupVideo(i);
  });
}

// Play each of the videos.
function setupVideo(index) {
  videoCount = index;
  playVideos(videoCount);
}

I know my problem lies in

$(video+i).click(function(){...

I've tried various methods of passing i to the video variables.

Upvotes: 0

Views: 97

Answers (4)

Cranio
Cranio

Reputation: 9847

Your method is wrong on many levels.

First of all, you can't "add" a number to a variable and expect to create another variable. When you do "video + i", you are adding the content of the variable video to the content of the variable i. You have no variable called video so you are adding undefined to a number.

What you have to do is to dynamically access a variable, and in Javascript you can do it by accessing the object in whose scope the variables live, for example window.

Then again, you must treat window as an associative array and therefore use window["video" + i] to access video0, video1... Note the quotes around "video": it means that you concatenate two strings ("video" and the content of i, which is a number but is converted to a string), thereby creating strings like "video0", "video1", etc., and you use those newly created strings as keys in an associative array to obtain the values.

This is possible only because Javascript creates such an array in the main scope.

Then again, the approach is not good. You should use an array to do operations like these:

var videos = ['div0', 'div1', 'div2'];

or use a common class to identify your videos

Upvotes: 1

Haresh Vidja
Haresh Vidja

Reputation: 8496

For your code solution is access global variable using window

var video0, video1, video2;
video0 = '#div0';
video1 = '#div1';
video2 = '#div2';

for (i = 0; i <= 3; i ++) {
  $(window['video'+i]).click(function(){
      setupVideo(i);
  });
}

// Play each of the videos.
function setupVideo(index) {
  videoCount = index;
  playVideos(videoCount);
}

I suggest to use store each element selector in array, and no need of setupVideo() function.

var video_elements=["#div0","#div1","#div2"];
for (i = 0; i <= video_elements.length; i ++) {
  $(video_elements[i]).click(function(){
      playVideos(i);
  });
}

Upvotes: 0

Felipe Oriani
Felipe Oriani

Reputation: 38608

Try to create your selector on the loop and use the method on to add an event handler. Add an data value on the element and use it to read to perform your setupVideo method. See the comments on the code bellow:

for (i = 0; i < 2; i ++) {
  var divElement = $("#div" + i);
  divElement.data("index", i);
  divElement.on("click", function() {
      var index = $(this).data("index");
      setupVideo(index);
  });
}

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can't access a variable by concatenating its name together. A better method for this would be to place a common class on all the elements and pass their index to playVideos(). Try this:

$('.video').click(function() {
    playVideos($(this).index('.video'));
});

Upvotes: 0

Related Questions