JavaScript slice() not showing the correct amount of cards on click

Question

I have a section called .registryShowcase.

This module contains logos and displays 8 by default. Then, on button click, it will load the next 8, until there's no more to load (at which point the button will hide itself).

However, with my current approach, I'm running into the following issues:

I have multiple .registryShowcase sections on a single page which means that when I click #registryShowcase-loadmore, it starts to show logos in the other sections too.
#registryShowcase-loadmore doesn't hide in the first section, even through it has completed showing all possible logos.
Section 2 only loads 6 more logos, even though I have defined it to show the next 8

Demo

$(function() {

  const loadmoreBtn = $('.registryShowcase-loadmore');
  const hiddenCard = $('.registryShowcase__card:hidden');
  var x = 8;

  loadmoreBtn.on('click', function(e) {
    e.preventDefault();
    x = x + 8;
    hiddenCard.slice(0, x).fadeIn().addClass("registryShowcase__card--flex");
    if (hiddenCard.length == 0) {
      loadmoreBtn.fadeOut();
    }
  });

});

:root {
  --navy: #0E185F;
  --white: #FFFFFF;
}

.registryShowcase {
  padding: 139px 0 140px 0;
}

.registryShowcase__card {
  display: none;
}

.registryShowcase__card--flex,
.registryShowcase__card:nth-child(-n+8) {
  display: flex !important;
}

.registryShowcase__box {
  margin-bottom: 21px;
  background-color: var(--white);
  border-radius: 26px;
  padding: 48px 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.registryShowcase__btn {
  margin-top: 43px;
}

.registryShowcase__btn a {
  color: #FF6575;
}

.registryShowcase__btn a:hover {
  color: var(--white);
}

posixpascal · Accepted Answer

Without touching too much of the code, maybe something like this where each section stores it's current visible-count in a data-attribute.

With [data-cards-to-load] and [data-cards-to-show] you can define how many cards should be visible up front and how many cards you want to load per button click.

The second section now shows 6 cards initially and loads 8 while the first section shows 6 cards and loads 6 per button click.

 const CARD_SELECTOR = '.registryShowcase__card';
const LOAD_MORE_SELECTOR = '.registryShowcase-loadmore';
const SHOWCASE_SELECTOR = '[data-showcase]';


const loadMore = (showcase$, numVisible) => {
    const cards = showcase$.find(CARD_SELECTOR);

    cards.slice(0, numVisible).fadeIn();
    cards.slice(numVisible).fadeOut();
    if (numVisible >= cards.length) {
        showcase$.find(LOAD_MORE_SELECTOR).fadeOut();
    }

    showcase$.data('showcase-visible', numVisible);
}

const initShowCase = (showcase$) => {
    const cardsToShow = showcase$.data('cards-to-show') || 6;
    const cardsToLoad =  showcase$.data('cards-to-load') || 6;
    showcase$.data('showcase-visible', 0);
    showcase$.find(CARD_SELECTOR).fadeOut()

    // Load first set of cards
    loadMore(showcase$, cardsToShow);

    showcase$.find(LOAD_MORE_SELECTOR).on('click', (ev) => {
        const visibleCards = (showcase$.data('showcase-visible')) + cardsToLoad;
        loadMore(showcase$, visibleCards);
        ev.preventDefault();
    });
}

$(function () {
    $('[data-showcases]').each((idx, showcase) => initShowCase($(showcase)));
});

:root {
    --navy: #0E185F;
    --white: #FFFFFF;
}


.registryShowcase {
    padding: 139px 0 140px 0;
}

.registryShowcase__card {
    display: none;
}



.registryShowcase__box {
    margin-bottom: 21px;
    background-color: var(--white);
    border-radius: 26px;
    padding: 48px 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.registryShowcase__btn {
    margin-top: 43px;
}

.registryShowcase__btn a {
    color: #FF6575;
}

.registryShowcase__btn a:hover {
    color: var(--white);
}

.d-none {
    display: none !important;
}

JavaScript slice() not showing the correct amount of cards on click

Demo

Answers (1)

Related Questions