Question

我有一个基本的for循环来创建缩略图图库：

//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]中获取其他数据？

感谢。

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

Answer 2

试试这个：

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

For Loop - 将动态变量传递给click函数

2 个答案: