如何在jQuery列表筛选中勾选某类复选框时排除指定重叠类内容

实现方案 #

按照你的需求，仅需新增排除类复选框组，再在原有筛选逻辑中追加排除判断即可，适配任意数量的类绑定场景。

第一步：补充HTML结构 #

在原有的.categories区域后方新增排除类选择区域：

<div class="exclude-categories">
  <h4>排除以下类别</h4>
  <span class="category">
    <input type="checkbox" value="classa" id="ex-classa">
    <label for="ex-classa">Class A</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classb" id="ex-classb">
    <label for="ex-classb">Class B</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classc" id="ex-classc">
    <label for="ex-classc">Class C</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classd" id="ex-classd">
    <label for="ex-classd">Class D</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classe" id="ex-classe">
    <label for="ex-classe">Class E</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classf" id="ex-classf">
    <label for="ex-classf">Class F</label>
  </span>
</div>

第二步：替换原有JS代码 #

修改后的JS已新增排除逻辑，兼容你原有的并集/交集筛选能力：

var checkboxes = document.querySelectorAll(".categories input");
for(var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("change", filter);
}
// 绑定排除类复选框的触发事件
var excludeCheckboxes = document.querySelectorAll(".exclude-categories input");
for(var i = 0; i < excludeCheckboxes.length; i++) {
  excludeCheckboxes[i].addEventListener("change", filter);
}
var radios = document.getElementsByName("operation");
for(var i = 0; i < radios.length; i++) {
  radios[i].addEventListener("change", filter);
}
filter();
function filter() {
  var i, j;

  // 读取筛选模式：并集/交集
  var operation = document.getElementById("op-union").checked ? "union" : "intersection";

  // 读取选中的要展示的类别
  var checkboxes = document.querySelectorAll(".categories input");
  var categories = [];
  var c;
  for(i = 0; i < checkboxes.length; i++) {
    if(checkboxes[i].checked) {
      c = checkboxes[i].value;
      categories.push(c);
    }
  }

  // 读取选中的要排除的类别
  var excludeCategories = [];
  for(i = 0; i < excludeCheckboxes.length; i++) {
    if(excludeCheckboxes[i].checked) {
      c = excludeCheckboxes[i].value;
      excludeCategories.push(c);
    }
  }

  // 执行筛选逻辑
  var items = document.querySelectorAll(".filterDiv");
  var item, show;
  for(i = 0; i < items.length; i++) {
    item = items[i];
    if(categories.length == 0) {
      show = true;
    } else if(operation == "union") {
      // 并集：只要包含任意一个选中类别就符合要求
      show = false;
      for(j = 0; j < categories.length; j++) {
        if(item.classList.contains(categories[j])) {
          show = true;
          break;
        }
      }
    } else {
      // 交集：需要包含所有选中类别才符合要求
      show = true;
      for(j = 0; j < categories.length; j++) {
        if(!item.classList.contains(categories[j])) {
          show = false;
          break;
        }
      }
    }

    // 排除逻辑：符合基础筛选要求的条目，只要包含任意一个排除类就隐藏
    if(show && excludeCategories.length > 0) {
      for(j = 0; j < excludeCategories.length; j++) {
        if(item.classList.contains(excludeCategories[j])) {
          show = false;
          break;
        }
      }
    }

    if(show) {
      item.classList.add("show");
    } else {
      item.classList.remove("show");
    }
  }
}

第三步：补充基础CSS（如果还没加的话） #

/* 筛选条目默认隐藏，符合条件的显示 */
.filterDiv {
  display: none;
}
.filterDiv.show {
  display: block;
}

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