jQuery - Добавление миниатюр из массива объектов с определенным номером индекса(data-индекс)

#jquery #arrays #indexing #foreach

#jquery #массивы #индексация #инструкция foreach

Вопрос:

Во-первых, я новичок в этом, и я учусь, поэтому не судите мой код слишком строго. У меня есть массив объектов, которые включают 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) =gt; { let imgsrc = data[index].photo; $('.thumbsbox').append('lt;img class="thumbnail" data-index="${index}" src= "' imgsrc '"gt;');  });

Моя проблема в том, что он создает эскизы, как и должно быть, но мне нужен индекс данных, чтобы показать фактический номер индекса объекта из массива. Теперь на элементе inspect он показывает только: «${индекс}» на каждом миниатюре.

Есть идеи, как сделать этот индекс данных фактическим номером индекса этих объектов?

Большое вам спасибо за ваши ответы

Ответ №1:

Вы можете использовать тот же способ, которым вы использовали для отображения imgsrc, обрабатывая переменную индекса как строку. в нем должно быть написано индекс

 $('.thumbsbox').append('lt;img class="thumbnail" data-index="' index '" src= "' imgsrc '"gt;');