@NonFame

Как закрыть карточку при клике за ее пределы и запретить создание одинаковых классов?

Есть карточка товара. С отрисовкой справился и с закрытием по клику на иконку.
Есть 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()}
})
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ответы на вопрос 1
lazalu68
@lazalu68
Salmon
"Как закрыть карточку при клике за ее пределы" - тут всё как обычно: проверяете все клики по документу, если клик был сделан не по карточке, тооооо... клик был сделан не по карточке)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
27 янв. 2021, в 00:37
11111 руб./за проект
26 янв. 2021, в 23:30
3000 руб./за проект
26 янв. 2021, в 23:07
1000 руб./за проект