如何在頁面上篩選內容卡？

Question

我創建了一篇包含三個類別的部落格文章：（數位行銷類別、提示和建議類別、加密貨幣類別）

我想做的是過濾它。

例如，如果我想查看數位行銷類別的所有文章，我將點擊此按鈕來顯示所有數位行銷類別並隱藏其他類別。

這是我的程式碼範例。問題是我的過濾器不起作用。問題出在哪裡？

我嘗試添加 JavaScript 使其工作，但仍然不起作用。問題出在哪裡？

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

在您的程式碼中，您將「全部過濾」按鈕的 data-category 屬性定義為 data-category="filter-all"。因此，當按一下「全部」按鈕時，JavaScript 程式碼中的 selectedCategory 變數將被設定為「filter-all」。

但是，在按類別過濾文章的 if 語句中，該語句與「all」進行比較，這與「filter-all」不匹配，因此不會顯示任何文章。

這是您修正後的程式碼：

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

此外，您提供的 JS 在最後缺少 });，不確定這是否只是您不小心錯過了該行想法:)