Как отследить событие по ID в Array

Question

Как отследить событие по ID в Array

Рейтинг: 0Ответов: 1Опубликовано: 17.06.2023

Итак, есть корзина - массив products в который добавляются элементы, созданные с помощью класса Product. Есть еще один массив cardAddArr, который состоит из кнопок запуска класса Product. По клику на одной из кнопок массива cardAddArr в массив products добавляется новый элемент. Чтобы удалить элемент внутри корзины (по повторному клику на кнопке cardAdd), используется метод splice, для которого нужно указать точный индекс элемента, то есть порядковый номер элемента в массиве. Проблема в том, что индексы массивов cardAddArr и products могут не совпадать! Потому что пользователь мог нажимать кнопки сначала в одном порядке (добавляя элементы), а потом в другом. Так как же быть?

Добавляю ID внутрь класса Product, но как заставить функцию removeProduct удалять элементы не по индексу, а по ID?

ссылка на проект с корзиной

http://igorbobyrev.ru/homeworks/funiro/

const cardAddArr = Array.from(document.querySelectorAll(".card__basket")); //кнопка добавить в корзину
const cart = document.querySelector("#cart");  //кнопка корзины

class Cart {
    products;
    constructor() {
        this.products = [];
    }
    addProduct(product) {
        this.products.push(product);
    }
    removeProduct(index) {
        this.products.splice(index, 1);
    }
}

class Product {
    imageSrc;
    // . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
    id;
    constructor(card) {
        this.imageSrc = card.querySelector(".card__image").children[0].src;
        // . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
        // . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
        // . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
        this.id = card.querySelector(".card__basket").dataset.id;
    }
};

const myCart = new Cart();

myCart.products = cardAddArr.forEach((cardAdd, i) => {
    cardAdd.addEventListener("click", (e) => {
        e.preventDefault();
        const card = e.target.closest(".card");
        const product = new Product(card);
        if (cardAdd.classList.contains("added")) {
            cardAdd.classList.remove("added");
            myCart.removeProduct(i);
            cardAdd.textContent = "Add to cart";
            basketBlockFill();
        } else {
            cardAdd.classList.add("added");
            myCart.addProduct(product);
            cardAdd.textContent = "Already inside";
        }; 
    });
});

javascript массивы

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Мне нужно было по повторному клику на кнопке добавления нового продукта в массив удалить элемент, полученный при первом клике на этой кнопке. Я знаю по крайней мере о трех способах удаления элемента из массива: delete, splice и filter. Delete мне не подошел, т.к. он не удалял элемент а только его свойства, нужно было сразу вставлять функцию рендеринга корзины. Splice мне не подошел, потому что он удаляет по индексу, а проблему с индексом я описал в вопросе. И я воспользовался методом filter, для работы которого нужно было указать условия - в качестве них я поставил равенство кнопки и продукта по ID

myCart.products = cardAddArr.forEach((cardAdd, id) => {

        cardAdd.addEventListener("click", (e) => {
            e.preventDefault();
            
            const card = e.target.closest(".card");

            const product = new Product(card);
            const savedCart = JSON.parse(localStorage.getItem("cart"));
            myCart.products = savedCart.products;
            if (cardAdd.classList.contains("added")) {
                cardAdd.classList.remove("added");
                let cardId = e.target.dataset.id;  
                // нахожу ID кнопки на карточке
                let newArray = myCart.products.filter((product) => 
                product.id !== cardId); 
                // сравниваю ID нового продукта в корзине и ID карточки,
                // и получаю новый массив, без нажатого продукта
                myCart.products = newArray; 
                // обратно загоняю всё в старый массив

                localStorage.setItem("cart", JSON.stringify(myCart));
                cartNum.textContent = myCart.count; 
                cardAdd.textContent = "Add to cart";
                basketBlockFill();
            } else {
                cardAdd.classList.add("added");
                myCart.addProduct(product);
                localStorage.setItem("cart", JSON.stringify(myCart));
                cartNum.textContent = myCart.count;
                cardAdd.textContent = "Already inside";
            }; 
        });

Как отследить событие по ID в Array

Ответы