Bagaimana untuk menapis kad kandungan pada halaman?

Question

Saya mencipta catatan blog dengan tiga kategori: (Kategori Pemasaran Digital, Kategori Petua & Nasihat, Kategori Mata Wang Kripto)

Apa yang saya mahu lakukan ialah menapisnya.

Sebagai contoh, jika saya ingin melihat semua artikel dalam kategori Pemasaran Digital, saya akan klik butang ini untuk menunjukkan semua kategori Pemasaran Digital dan menyembunyikan kategori lain.

Berikut ialah contoh kod saya. Masalahnya ialah penapis saya tidak berfungsi. dimana masalahnya?

Saya cuba menambahkan JavaScript untuk menjadikannya berfungsi, tetapi masih tidak berfungsi. dimana masalahnya?

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

Dalam kod anda, pembolehubah data-category 属性定义为 data-category="filter-all"。因此，当单击“全部”按钮时，JavaScript 代码中的 selectedCategory anda untuk butang "Tapis Semua" akan ditetapkan kepada "penapis-semua".

Walau bagaimanapun, dalam pernyataan if yang menapis artikel mengikut kategori, pernyataan itu dibandingkan dengan "semua", yang tidak sepadan dengan "penapis-semua", jadi tiada artikel akan dipaparkan.

Ini ialah kod anda yang telah diperbetulkan:

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

Juga, JS yang anda sediakan hilang }); pada akhirnya, tidak pasti sama ada itu hanya anda secara tidak sengaja kehilangan garis pemikiran itu :)