网页元素过滤器改造：添加Show all与Hide all按钮实现批量控制

这里是修改后的完整代码，已经实现了Show all和Hide all按钮的功能，同时同步所有过滤按钮的状态：

<div class="filter">
  <div class="filterbutton" data-filter=".filter01">Filter 01</div>
  <div class="filterbutton" data-filter=".filter02">Filter 02</div>
  <div class="filterbutton" data-filter=".filter03">Filter 03</div>
</div>

<div class="group">
  <a class="filter01 filter02 filter03">This element has filter01, filter02 and filter03</a>
  <a class="filter01 filter02">This element has filter01 and filter02</a>
  <a class="filter01 filter03">This element has filter01 and filter03</a>
  <a class="filter02 filter03">This element has filter02 and filter03</a>
  <a class="filter01">This element has filter01 only</a>
  <a class="filter02">This element has filter02 only</a>
  <a class="filter03">This element has filter03 only</a>
</div>

<div class="show-hide">
  <div class="showallbutton">Show all</div>
  <div class="hideallbutton">Hide all</div>
</div>

.filterbutton,
.showallbutton,
.hideallbutton {
  border: 1px solid;
  display: inline-block;
  background: lightblue;
  padding: 5px;
  cursor: pointer
}

.group a {
  display: block;
}

// 绑定所有过滤按钮点击事件
for (let button of document.querySelectorAll(".filterbutton")) {
  button.addEventListener("click", filter);
}

// 绑定Show all和Hide all按钮事件
document.querySelector(".showallbutton").addEventListener("click", showAll);
document.querySelector(".hideallbutton").addEventListener("click", hideAll);

let filters = new Set;

function toggleDisplay(selector, display) {
  let elems = document.querySelectorAll(selector);
  for (let elem of elems) {
    elem.style.display = display;
  }
}

function filter() {
  let filterSelector = this.dataset.filter;
  let show = filters.delete(filterSelector);
  this.style.color = show ? "" : "rgb(200,200,200)";
  if (!show) {
    filters.add(filterSelector);
  } else {
    toggleDisplay(filterSelector, "");
  }
  if (filters.size) {
    toggleDisplay([...filters].join(","), "none");
  }
}

// 显示所有元素并重置过滤按钮状态
function showAll() {
  filters.clear();
  // 恢复所有过滤按钮颜色
  document.querySelectorAll(".filterbutton").forEach(btn => {
    btn.style.color = "";
  });
  // 显示所有分组元素
  document.querySelectorAll(".group a").forEach(elem => {
    elem.style.display = "";
  });
}

// 隐藏所有元素并设置过滤按钮为淡化状态
function hideAll() {
  const allFilterSelectors = [...document.querySelectorAll(".filterbutton")].map(btn => btn.dataset.filter);
  
  filters.clear();
  allFilterSelectors.forEach(selector => filters.add(selector));
  
  // 淡化所有过滤按钮
  document.querySelectorAll(".filterbutton").forEach(btn => {
    btn.style.color = "rgb(200,200,200)";
  });
  
  // 隐藏所有匹配过滤条件的元素
  toggleDisplay(allFilterSelectors.join(","), "none");
}

关键修改说明 #

• 新增showAll和hideAll两个函数，完全复用你原有的filters集合和toggleDisplay函数，保证逻辑一致性
• showAll会清空过滤集合，还原所有按钮的默认颜色，并显示所有分组内的元素
• hideAll会把所有过滤规则加入集合，将所有按钮设为淡化状态，并隐藏所有匹配的元素
• 给两个新按钮绑定了对应的点击事件，确保点击后同步更新所有状态

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