点击卡片Alternative按钮时filter按钮active2类未添加问题求助

1. 把筛选和按钮激活逻辑抽成通用函数 #

别分开写顶部按钮和卡片按钮的逻辑，统一成一个函数，既能处理内容筛选，又能同步顶部按钮的active2类状态：

function handleFilter(target) {
  // 处理卡片筛选（替换成你原有的筛选代码即可）
  document.querySelectorAll('.card').forEach(card => {
    if (target === 'all' || card.dataset.category === target) {
      card.style.display = 'block';
    } else {
      card.style.display = 'none';
    }
  });

  // 同步顶部按钮的active2类状态
  document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.classList.remove('active2');
    if (btn.dataset.target === target) {
      btn.classList.add('active2');
    }
  });
}

2. 给顶部筛选按钮绑定事件 #

将原有顶部按钮的逻辑改为调用这个通用函数：

document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    handleFilter(this.dataset.target);
  });
});

3. 给卡片上的Alternative按钮添加事件 #

点击卡片按钮时，同样调用通用函数，传入对应的data-target值：

document.querySelectorAll('.alternative-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    handleFilter(this.dataset.target);
  });
});

关键注意点 #

• 确保卡片的data-category、顶部按钮的data-target、卡片按钮的data-target值完全匹配（比如统一为condoms），否则无法正确关联。
• 如果你的筛选逻辑是用jQuery或其他框架实现的，只需替换handleFilter里的筛选部分代码，保留顶部按钮的类切换逻辑即可。
• 别忘了处理all选项的情况：当target为all时，要给顶部的All按钮加上active2类。

这样修改后，无论点击顶部筛选按钮还是卡片上的Alternative按钮，顶部对应筛选按钮都会同步添加active2类，实现功能与视觉状态的统一。

内容的提问来源于stack exchange，提问作者ohmygodimpregnant