Решение проблем: познакомитесь с неправильным идентификатором, когда нажимается продукт ⇐ Javascript

[Anonymous]

Мне нужна помощь для решения моих вопросов ниже: < /p>
Я сгенерировал динамически карты с JavaScript и попытаюсь получить идентификатор, когда нажимается продукт. Результаты, которые я сделал, являются: < /p>
1) Когда нажимайте первый продукт, он получает неправильный идентификатор, показывая детали последнего продукта
2), слушатель событий работает только для первого элемента, так что я могу ' T показывают другой продукт. let cardData = [
{
id: 1,
imgFile: 'images/products/marievi5.jpg',
heading: 'Marievi the Influencer',
body: 'this is card body',
price: 150,

},
{
id: 2,
imgFile: 'images/products/rock1.jpg',
heading: 'card 2',
body: 'this is card body',
price: 200,

},
{
id: 3,
imgFile: 'images/products/marievi5.jpg',
heading: 'card 3',
body: 'this is card body',
price: 400,

},
{
id: 4,
imgFile: 'images/products/marievi5.jpg',
heading: 'card 4',
body: 'this is card body',
price: 300,

},
];

const createCard = () => {

let cardContainer = document.querySelector('.card-container');
cardContainer.innerHTML = ''; // Clear the grid first

cardData.forEach((data) => {
//create product card
let card = document.createElement('div');
card.classList.add('card-body');
card.setAttribute('data-product-id', data.id);

// Add content inside the product card
let content = `









${data.heading}
${data.body}

Price:${data.price}



Подробнее здесь: https://stackoverflow.com/questions/794 ... is-clicked