基于data-tag的卡片筛选按钮部分失效的问题求助

我仔细看了你的问题描述和代码，发现是几个细节没处理到位，导致部分筛选按钮（比如Database、HTML5、CSS3）点击后无法正常显示对应卡片，咱们来一步步解决：

问题现象 #

你提到控制台已经显示filterCards函数正确接收到了标签（比如点击CSS3时输出filterCards called with tag: CSS3），但就是看不到匹配的卡片；而Design、UI/UX这类按钮却能正常工作，同时附上了三种状态的截图：

• 点击「All」按钮的效果：
  
• 点击「Design」按钮的正常效果：
  
• 点击「Database」按钮的失效效果：
  

问题原因 #

我排查了代码和卡片的data-tags属性，找到了两个核心问题：

1. 大小写不匹配
   • 按钮的data-tag值有大小写差异，比如按钮是CSS3、database，但卡片的data-tags里对应的标签是css3、Database，大小写不一致导致includes匹配失败。
2. 标签字符串带多余空格
   你的卡片data-tags是用「逗号+空格」分隔的，比如data-tags=" design , css3 , html5 ..."，当你用split(" ")分割时，得到的数组里会包含空字符串和带前后空格的标签（比如" design "），而按钮的data-tag是纯标签（比如design），自然匹配不上。

修复方案 #

针对这两个问题，我们可以修改filterCards函数，同时处理大小写和空格问题：

修改后的JavaScript代码 #

const filterButtons = document.querySelectorAll(".filter-buttons button");
filterButtons.forEach(button => {
  button.addEventListener("click", function() {
    filterCards(this.getAttribute("data-tag"), this);
  });
});

function filterCards(tag, button) {
  console.log("filterCards called with tag:", tag);
  let cards = document.querySelectorAll(".card");
  let buttons = document.querySelectorAll(".filter-buttons button");

  // 移除所有按钮的active类
  buttons.forEach(btn => btn.classList.remove("active"));
  // 给点击的按钮添加active类
  button.classList.add("active");

  // 筛选卡片逻辑
  cards.forEach(card => {
    // 1. 用逗号分割标签，2. 清理每个标签的前后空格，3. 统一转成小写
    let cardTags = card.getAttribute("data-tags")
      .split(",")
      .map(item => item.trim().toLowerCase());
    
    // 把点击的标签也转成小写，实现不区分大小写匹配
    const targetTag = tag.toLowerCase();
    if (targetTag === "all" || cardTags.includes(targetTag)) {
      card.classList.remove("hidden");
    } else {
      card.classList.add("hidden");
    }
  });
}

额外修复：移除多余的语法错误 #

你原来的JS代码里多了一个多余的});（在filterButtons.forEach循环结束后），这个会导致语法错误，记得删掉哦！

效果验证 #

修改后，不管按钮标签和卡片标签的大小写是否一致，也不管标签前后有没有空格，都能正确匹配：

• 点击CSS3按钮时，会转成小写css3，卡片里的css3清理后也是css3，能正常匹配；
• 点击database按钮时，转成小写database，卡片里的Database转成小写后也能匹配上，就能显示对应的UBER-Data卡片了。

备注：内容来源于stack exchange，提问作者Alex McVay