jQuery遍历对象数组追加缩略图时data-index索引不生效问题求助

你代码的问题在于 ${} 是ES6模板字符串的插值语法，只有用**反引号（）**包裹的字符串才会解析这个语法，你当前用单引号包裹字符串，${index}`会被当成普通文本输出，不会替换成变量值。

方案1：使用模板字符串（推荐） #

直接用反引号包裹整个HTML字符串，既可以正常解析变量插值，也不需要写多余的字符串拼接符号：

let data = [avenue, school, street, block];
data.forEach((item, index) => {
  // 反引号包裹，${} 会自动替换为对应变量值
  $('.thumbsbox').append(`<img class="thumbnail" data-index="${index}" src="${item.photo}">`);
});

小提示：forEach遍历的第一个参数item就是当前循环的数组元素，不需要额外通过data[index]取值，直接用item.photo更简洁。

方案2：使用普通字符串拼接 #

如果需要兼容不支持ES6的老旧环境，按照你拼接src的方式把index拼进去即可：

let data = [avenue, school, street, block];
data.forEach((item, index) => {
  let imgsrc = item.photo;
  $('.thumbsbox').append('<img class="thumbnail" data-index="'+ index +'" src="'+ imgsrc +'">');
});

后续获取索引时可以直接用jQuery的data()方法，会自动返回数值类型的索引：

$('.thumbnail').on('click', function() {
  let currentIndex = $(this).data('index');
  // 后续业务逻辑
});

内容的提问来源于stack exchange，提问作者jvlcek93