如何用JavaScript避免网站两个过滤器互相覆盖？

问题根源：当前两个过滤器各自独立执行显示/隐藏逻辑，完全忽略另一个过滤器的选中状态，导致后触发的过滤器会直接覆盖前一个的过滤结果。

修复思路：统一过滤逻辑，同时获取性别和工作类型的所有选中条件，对每个职位进行双重校验——只有同时满足所有已选中过滤条件的职位才显示，否则隐藏。若某类过滤器无选中项，则自动跳过该类条件的限制。

修改后的完整代码 #

// 绑定点击事件，统一触发过滤逻辑
typeOfGender.forEach((li) => {
  li.addEventListener("click", () => {
    li.classList.toggle("filter-header-selected");
    filterJobs();
  });
});
typeOfWork.forEach((li) => {
  li.addEventListener("click", () => {
    li.classList.toggle("filter-footer-selected");
    filterJobs();
  });
});

// 统一处理所有过滤条件的核心函数
function filterJobs() {
  // 收集选中的性别条件，转为小写便于匹配
  const selectedGenders = Array.from(document.querySelectorAll(".filter-header-selected"))
    .map(el => el.innerHTML.match(/[А-Яа-я]/)[0].toLowerCase());
  
  // 收集选中的工作类型条件
  const selectedWorkTypes = Array.from(document.querySelectorAll(".filter-footer-selected p"))
    .map(el => el.innerHTML);

  // 遍历所有职位，逐一校验条件
  arrayOfClickableJobs.forEach(job => {
    // 性别校验：无选中则直接通过，否则检查是否匹配任一选中性别
    const passesGenderFilter = selectedGenders.length === 0 
      ? true 
      : selectedGenders.some(gender => job[2].includes(gender));
    
    // 工作类型校验：无选中则直接通过，否则检查是否匹配任一选中类型
    const passesWorkFilter = selectedWorkTypes.length === 0 
      ? true 
      : selectedWorkTypes.includes(job[1]);
    
    // 同时满足两个条件才显示职位
    job[0].setVisible(passesGenderFilter && passesWorkFilter);
  });
}

代码说明：

• 统一触发入口：两个过滤器的点击事件都调用filterJobs，确保每次操作都重新计算所有过滤条件的交集。
• 条件收集：将选中的过滤项转为数组，方便后续批量校验。
• 灵活校验逻辑：支持单类过滤器多选，也支持两类过滤器组合使用，无选中项时自动不对职位做限制。
• 精准显示控制：只有同时满足所有选中条件的职位才会被显示，彻底解决过滤器互相覆盖的问题。

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