如何基于前两个区块的选中结果过滤第三个区块的卡片？

你只需要替换原有JS代码为以下内容即可实现需求：

const step1_items = document.querySelector('.step-1').querySelectorAll('.item');
const step2_items = document.querySelector('.step-2').querySelectorAll('.item');
const stepCards = document.querySelector('.step-3').querySelectorAll('.card');

// 核心筛选逻辑
function filterCards() {
  // 获取当前两个区块的选中值
  const activeStep1 = document.querySelector('.step-1 .item_active').textContent.trim().toLowerCase();
  let activeStep2 = document.querySelector('.step-2 .item_active').textContent.trim().toLowerCase();
  // 适配选项值和卡片文本的格式差异
  if (activeStep2 === 'comedies') activeStep2 = 'comedy';

  let matchNum = 0;
  stepCards.forEach(card => {
    const cardContent = card.textContent.toLowerCase();
    // 判断卡片是否同时匹配两个选中项
    const isMatch = cardContent.includes(activeStep1) && cardContent.includes(activeStep2);
    if (isMatch) {
      matchNum++;
      // 匹配成功的卡片最多展示前4张
      card.style.display = matchNum <= 4 ? 'block' : 'none';
    } else {
      card.style.display = 'none';
    }
  })
}

step1_items.forEach(function(item) {
  item.addEventListener('click', function() {
    step1_items.forEach(function(item) {
      item.classList.remove('item_active');
    });
    this.classList.add('item_active');
    // 切换选项后触发筛选
    filterCards();
  });
})

step2_items.forEach(function(item) {
  item.addEventListener('click', function() {
    step2_items.forEach(function(item) {
      item.classList.remove('item_active');
    });
    this.classList.add('item_active');
    // 切换选项后触发筛选
    filterCards();
  });
})

// 页面初始化默认执行一次筛选，适配默认选中第一个选项的规则
filterCards();

修改说明：

• 新增了统一筛选函数，每次切换区块1、2的选中项后会自动刷新区块3的展示结果
• 筛选逻辑支持同时匹配两个区块的选中值，匹配成功的卡片最多展示前4张，超出部分自动隐藏
• 额外处理了选项和卡片文本的格式差异，保证Comedies选项可以正常匹配卡片内的comedy内容

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