Comment filtrer les fiches de contenu sur une page ?

Question

J'ai créé un article de blog avec trois catégories : (Catégorie Marketing numérique, Catégorie Trucs et conseils, Catégorie Crypto-monnaie)

Ce que je veux faire, c'est le filtrer.

Par exemple, si je souhaite voir tous les articles de la catégorie Marketing numérique, je cliquerai sur ce bouton pour afficher toutes les catégories de marketing numérique et masquer les autres catégories.

Voici mon exemple de code. Le problème est que mon filtre ne fonctionne pas. où est le problème?

J'ai essayé d'ajouter du JavaScript pour que cela fonctionne mais cela ne fonctionne toujours pas. où est le problème?

document.addEventListener("DOMContentLoaded", () => {
  "use strict";

  /**
   * Article Category Filter
   */
  const filterButtons = document.querySelectorAll('.blog-filters button');
  const articleCards = document.querySelectorAll('.article-card');

  filterButtons.forEach(button => {
    button.addEventListener('click', () => {
      const selectedCategory = button.getAttribute('data-category');

      articleCards.forEach(card => {
        const cardCategory = card.getAttribute('data-category');

        if (selectedCategory === 'all' || selectedCategory === cardCategory) {
          card.style.display = 'block';
        } else {
          card.style.display = 'none';
        }
      });
    });
  });
}); // this line added by community

<section id="blog" class="blog">
  <div class="row">
    <div class="col-md-8">
      <div class="posts-list">
        <div class="row">
          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="digital-marketing-category">
            Blog Card
          </div>
          <!-- Article Card -->

          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="tips-and-advice-category">
            Blog Card
          </div>
          <!-- Article Card -->

          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="cryptocurrency-category">
            Blog Card
          </div>
          <!-- Article Card -->
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="sidebar">
        <h3 class="sidebar-title">Article Categories</h3>
        <div class="blog-filters">
          <button data-category="filter-all">All</button>
          <button data-category="digital-marketing-category">Digital Marketing</button>
          <button data-category="tips-and-advice-category">Tips & Advice</button>
          <button data-category="cryptocurrency-category">Cryptocurrency</button>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

Dans votre code, votre variable data-category 属性定义为 data-category="filter-all"。因此，当单击“全部”按钮时，JavaScript 代码中的 selectedCategory pour le bouton "Filtrer tout" sera définie sur "tout filtrer".

Cependant, dans l'instruction if qui filtre les articles par catégorie, l'instruction est comparée à "all", qui ne correspond pas à "filter-all", donc aucun article ne sera affiché.

Voici votre code corrigé :

if (selectedCategory === 'filter-all' || selectedCategory === cardCategory) {
  card.style.display = 'block';
} else {
  card.style.display = 'none';
}

De plus, le JS que vous avez fourni est manquant }); à la fin, je ne sais pas si c'est juste que vous avez accidentellement manqué cette ligne de pensée :)