Есть карточка товара. С отрисовкой справился и с закрытием по клику на иконку.
Есть 2 проблемы, которые не могу решить:
1. Это как сделать закрытие карточки при клике за пределы карточки?(e.target при клике вне карточки, ни чего не видит)
2. Как запретить клик по элементам вне карточки или запретить создание еще одного одинакового класса? Просто при клике на товар, создается div карточки и выводится на экран. Но если я кликну на другой товар, то будет создан еще один идентичный div, но с другим товаром.
Есть мысли по решению этих вопросов, но они больше похожи на костыли.
Можно было бы создать пустой div-обертку и при клике на него, закрывать карточку, но мне кажется что это решение
не верно.
И правильно ли что я повесил обработчики на каждый из товаров?
productInfo() {
// Находим обертку товара
let goods = document.querySelectorAll('.product');
// Вешаем обработчики события на каждый товар
for (let i = 0; i < goods.length; i++) {
goods[i].addEventListener('click', (event) => {
// Получаем полную карточку товара при клике
let productContainer = event.target.parentNode
// Находим в родителе:
// Картинка
let img = productContainer.getElementsByTagName('img'),
// Путь до картинки
imgSrc = img[0].getAttribute('src')
// Имя продукта
let name = productContainer.querySelectorAll('.product__name');
// Цена продукта
let price = productContainer.querySelectorAll('.product__price');
// Вызываем метод отрисовки карточки товара
this.renderCard(imgSrc, name[0].textContent, price[0].textContent)
this.triggers()
})
}
},
renderCard(imgSrc, name, price) {
// Ищем контейнер в который передастся карточка товара
let cardContainer = document.querySelector('main');
// Отрисовываем структуру HTML
cardContainer.insertAdjacentHTML('afterbegin',
` <div class="card">
<img src="${imgSrc}" alt="">
<img class="close" src="../img/other/close.svg" alt="close">
<div class="card__info">
<p class="card__name">${name}</p>
<p class="card__vendorCode">Артикль: ${Math.floor(Math.random()*10000)}</p>
<p class="card__price">${price}</p>
<button class="btn">В корзину</button>
<p class="card__aboutGoods">The Series 7™ chair is an icon in modern<br>
furniture history, designed by Arne Jacobsen<br>
in 1955. Its unique shape is timeless and<br>
incredibly versatile, displaying character<br>
without overpowering the eye. The chair is<br>
made from 9 layers of pressure moulded<br>
veneer for strength, flexibility and durability<br>
despite its slender form. This is the most<br>
popular design within Fritz Hansen's chair<br>
collection.</p>
</div>
</div>`)
},
triggers(){
let close = document.querySelector('.close');
close.addEventListener('click', (e) => {
if (e.target === close){
document.querySelector('.card').remove()}
})
