如何在页面上筛选内容卡片？-PHP中文网问答

我创建了一篇包含三个类别的博客文章：（数字营销类别、提示和建议类别、加密货币类别）

我想做的是过滤它。

例如，如果我想查看数字营销类别的所有文章，我将单击此按钮来显示所有数字营销类别并隐藏其他类别。

这是我的代码示例。问题是我的过滤器不起作用。问题出在哪里？

我尝试添加 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


  
    
      
        
          
            Blog Card
          
          

          
            Blog Card
          
          

          
            Blog Card
          
          
        
      
    

    
      
        Article Categories

全部回复(1)

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

赞 +0

添加回复