Wie filtere ich Inhaltskarten auf einer Seite?

Question

Ich habe einen Blogbeitrag mit drei Kategorien erstellt: (Kategorie „Digitales Marketing“, Kategorie „Tipps und Ratschläge“, Kategorie „Kryptowährung“)

Was ich tun möchte, ist es zu filtern.

Wenn ich beispielsweise alle Artikel in der Kategorie „Digitales Marketing“ sehen möchte, klicke ich auf diese Schaltfläche, um alle Kategorien für digitales Marketing anzuzeigen und andere Kategorien auszublenden.

Hier ist mein Codebeispiel. Das Problem ist, dass mein Filter nicht funktioniert. Wo ist das Problem?

Ich habe versucht, JavaScript hinzuzufügen, damit es funktioniert, aber es funktioniert immer noch nicht. Wo ist das Problem?

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