Для цикла - передача динамических переменных в функцию щелчка

0

У меня есть базовый цикл для создания галереи миниатюр:

//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 + '>');
    }

Для каждого изображения есть дополнительная информация (в других столбцах листа распространения) - это также возвращается как "строки" в соответствии с приведенным выше.

Затем появляется функция щелчка для отображения большего изображения:

$('#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>');
});

Цель последнего бит - отобразить дополнительную информацию из той же строки, что и щелкнуло изображение - и, очевидно, оно не будет работать так, как написано. Как передать значение [i] для щелкнутого изображения в функцию щелчка, чтобы получить дополнительные данные из той же строки [i], что и щелкнуло изображение?

Благодарю.

Теги:
for-loop

2 ответа

0
Лучший ответ

Попробуй это:

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>');
1

Этот код может работать

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>');
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню