For Loop - passing dynamic variables to a click function

Question

I have a basic for loop to create a gallery of thumbnail images:

//code to query spreadsheet...data returned as 'rows'
for (var i = 0; i<rows.length; i++){
im = rows[i][0];
n = rows[i][1];
d = rows[i][2];
c = rows[i][3];  
$('#frame').append('<div class = box><img height = 290 src = ' + im + '>');
    }

For each image there is additional information (in other columns of the spread sheet) - this is also returned as 'rows' as per the above.

Next, there is a click function to display a larger image:

$('#frame').on('click', 'img', function() {
   var s = this.src.replace(/.jpg/, '');
   $('#show').append('<img src = ' + s + 'L.jpg><div id = details><strong>' + n + '</strong><br>' + d + '<br><span class = status>' + c +'</span></div>');
});

The aim of the last bit is to display the additional information from the same row as the clicked image - and obviously it won't work as written. How do I pass the value of [i] for the clicked image to the click function to get the additional data from the same row[i] as the clicked image?

Thanks.

possible duplicate of Assign click handlers in for loop

Pointy
– Pointy

2013-11-15 23:41:45 +00:00
Commented Nov 15, 2013 at 23:41 — Pointy
– Pointy, Commented Nov 15, 2013 at 23:41

SHIN · Accepted Answer · 2013-11-16 11:17:05Z

1

This code may work try this

for(var i = 0; i<rows.length; i++){
im = rows[i][0];
$('#frame').append('<div class = "box"> <img height =290 src = "'+ im +
'" onclick="clickImg('+i+')" >');
}
function clickImg(i){
im = rows[i][0];
n  = rows[i][1];
d  = rows[i][2];
c  = rows[i][3]; 
var s = im.replace(/.jpg/, '');
$('#show').append('<img src = "' + s + 'L.jpg" /> <div id = details><strong>' + n 
+ '</strong> <br>'+ d +'<br> <span class = "status"> ' + c +' </span> </div>');
}

answered Nov 16, 2013 at 11:17

SHIN

3861 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sideroxylon · Accepted Answer · 2013-11-17 09:36:20Z

0

Try this:

var im;
 for (var i = 0; i<rows.length; i++){
 im = rows[i][0]; 
 $('#frame').append('<div class = box><img id = ' + i + ' height = 290 src = ' + im + '>');
 }
 $('#frame').on('click', 'img', function() {
  var i = this.id;
  n = rows[i][1];
  d = rows[i][2];
  c = rows[i][3];
  var s = im.replace(/.jpg/, '');
  $('#show').append('<img src = "' + s + 'L.jpg" /> <div id = details><strong>' + n  + '</strong> <br>'+ d +'<br> <span class = "status"> ' + c +' </span> </div>');

edited Nov 17, 2013 at 9:36

answered Nov 17, 2013 at 9:15

sideroxylon

4,4261 gold badge25 silver badges42 bronze badges

Collectives™ on Stack Overflow

For Loop - passing dynamic variables to a click function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related