Как отключить клик внутри коллбека?

Question

[svm2001]

let $grid = $('.card__list').isotope({
        itemSelector: '.card--small',
        transitionDuration: 0,
    });
    
    $grid.isotope('on', 'arrangeComplete', function(filteredItems) {
        let showMoreBtn = document.querySelector('.js-load-more-btn')
        let maxCardsToShow = 6
        let cardsToShow = 6

        filteredItems.forEach((item, index) => {
            if(index < maxCardsToShow) {
                item.element.style.display = 'flex'
            } else {
                item.element.style.display = 'none'
            }
        })
        
        showMoreBtn.addEventListener('click', () => {
            console.log(1)
            let cardLength = filteredItems.length
            
            for(let i = maxCardsToShow; i < Math.min(maxCardsToShow + cardsToShow, cardLength); i++) {
                filteredItems[i].element.style.display = 'flex'
            }
            
            maxCardsToShow += cardsToShow
            
            if (maxCardsToShow >= cardLength) {
                showMoreBtn.style.display = 'none';
            }
        })
    });

Есть такой код. В начале идет объявление фильтров, потом идет метод от самой библиотеки "isolate", который возвращает колбек. Внутри него я делаю манипуляции и потом слушатель события по кнопке "Показать еще".
Когда страница загружается и я без переключения фильтров жму на кнопку "показать еще" - все срабатывает отлично. Код работает.
Когда я после загрузки страницы переключаю фильтры - начинает ломаться. В консоль вывел "1". Так вот количество выводов единицы в консоль равно количеству переключений в фильтре. Думаю из-за этого нормально не работает. Потому что метод у самой библиотеки каждый раз вызывается при переключении фильтров. А обработчик клика у меня как раз внутри него. И eventListenter - click регистрируется каждый раз заново, когда я нажимаю фильтры. Подскажите, что сделать можно? removeEventListener я пробовал, не работает(( мб неправильно написал(

Answer 1

[D1ma5ta]

let $grid = $('.card__list').isotope({
    itemSelector: '.card--small',
    transitionDuration: 0,
});

let showMoreBtn = document.querySelector('.js-load-more-btn');
let maxCardsToShow = 6;
let cardsToShow = 6;
let filteredItems = [];

function updateCardsDisplay() {
    filteredItems.forEach((item, index) => {
        if (index < maxCardsToShow) {
            item.element.style.display = 'flex';
        } else {
            item.element.style.display = 'none';
        }
    });
}

$grid.isotope('on', 'arrangeComplete', function(items) {
    filteredItems = items;
    maxCardsToShow = 6;
    updateCardsDisplay();
    showMoreBtn.style.display = (filteredItems.length > maxCardsToShow) ? 'block' : 'none';
});

showMoreBtn.addEventListener('click', () => {
    let cardLength = filteredItems.length;
    for (let i = maxCardsToShow; i < Math.min(maxCardsToShow + cardsToShow, cardLength); i++) {
        filteredItems[i].element.style.display = 'flex';
    }
    maxCardsToShow += cardsToShow;
    if (maxCardsToShow >= cardLength) {
        showMoreBtn.style.display = 'none';
    }
});

Comments

[svm2001]

Огромное тебе спасибо. То что нужно, работает. То, что отфильтрованный массив можно в ранее созданный пустой массив передать я не догадался. Именно в этом затык был. Опыта мало. Лучший