jQuery

Question

首先，我是新手，正在学习，所以不要对我的代码过于苛刻。我有一组对象，其中包括缩略图图像的 src，需要将它们附加到显示缩略图的容器 div。但是我需要知道点击了这些缩略图中的哪一个。我正在展示数组中对象之一的示例。我正在使用 jQuery 的这种结构来附加缩略图：

let avenue = {
photo: 'gallery/avenue.jpg',
title: 'Avenue',
description: 'Beautiful road with rays of sunlight coming through the mist'

};

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

我的问题是它按预期创建了缩略图，但我需要数据索引来显示数组中对象的实际索引号。现在在检查元素上它只显示：每个缩略图上的“${index}”。

有什么想法可以使这个数据索引成为这些对象的实际索引号吗？

非常感谢您的回答

Answer 1

您可以使用与映射 imgsrc 相同的方式，将索引变量视为字符串。它应该读作 +index+

$('.thumbsbox').append('<img class="thumbnail" data-index="'+index+'" src= "'+imgsrc+'">');

jQuery - 从具有特定索引号（数据索引）的对象数组中附加缩略图

jQuery - Appending thumbnails from array of objects with specific index number(data-index)

arrays

indexing

foreach