如何在页面上筛选内容卡片？

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 在最后缺少 });，不确定这是否只是您不小心错过了该行想法:)