求助：实现带类校验的Div多按钮叠加隐藏功能

首先得先修正你HTML里的一个关键问题：HTML中id属性必须唯一，你现在有多个元素用了id="poly"和id="light"，这会导致JavaScript选择元素时出现异常，所以先把这些重复的id去掉，只用类来标识元素即可。

接下来我们一步步实现你要的功能：

1. 修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>What webbing will you buy next ?</title>
 <link rel="stylesheet" href="main.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
 <style>
   /* 假设你的.active类是用来隐藏元素的，这里补充基础样式 */
   .active {
     display: none;
   }
 </style>
</head>
<body>
 <h1>WHAT WEBBING WILL I BUY NEXT ?</h1>
 <div class="container">
 <div class="row">
 <div class="col s12">
 <a onclick="showpoly();" class="waves-effect waves-light btn-large">Polyester</a>
 <a onclick="showlight();" class="waves-effect waves-light btn-large">Light</a>
 </div>
 </div>
 <div class="row">
 <div class="col s2 webbing polyamid"> Polyamid </div>
 <div class="col s2 webbing polyester"> Polyester </div>
 <div class="col s2 webbing nylon"> Nylon </div>
 <div class="col s2 webbing tubular"> Tubular </div>
 <div class="col s2 webbing heavy"> Heavy </div>
 <div class="col s2 webbing light"> Light </div>
 <div class="col s2 webbing polyamid"> Polyamid </div>
 <div class="col s2 webbing polyester"> Polyester </div>
 <div class="col s2 webbing nylon"> Nylon </div>
 <div class="col s2 webbing tubular"> Tubular </div>
 <div class="col s2 webbing heavy"> Heavy </div>
 <div class="col s2 webbing light"> Light </div>
 </div>
 </div>
 <script src="main.js"></script>
</body>
</html>

2. 实现JavaScript功能 #

我们用两个状态变量记录按钮的激活状态，然后抽离统一的显示更新逻辑，这样能让代码更清晰，也更容易维护：

// 状态变量：0=未激活（显示对应元素），1=激活（隐藏非目标元素）
let polyActive = 0;
let lightActive = 0;

// 统一更新显示的函数
function updateWebbingDisplay() {
  const allWebbing = document.querySelectorAll("div.webbing");
  
  allWebbing.forEach(el => {
    // 先重置状态，默认显示
    el.classList.remove('active');
    
    let shouldHide = false;

    // 处理Polyester按钮的逻辑：激活时隐藏非polyester元素
    if (polyActive === 1 && !el.classList.contains('polyester')) {
      shouldHide = true;
    }

    // 处理Light按钮的逻辑：激活时隐藏非light元素，但保留当前已显示的元素
    if (lightActive === 1 && !el.classList.contains('light')) {
      // 如果当前Polyester按钮是激活状态，且元素是polyester，就不隐藏
      if (!(polyActive === 1 && el.classList.contains('polyester'))) {
        shouldHide = true;
      }
    }

    if (shouldHide) {
      el.classList.add('active');
    }
  });
}

function showpoly() {
  // 切换Polyester按钮的状态
  polyActive = polyActive === 0 ? 1 : 0;
  updateWebbingDisplay();
}

function showlight() {
  // 切换Light按钮的状态
  lightActive = lightActive === 0 ? 1 : 0;
  updateWebbingDisplay();
}

功能说明 #

• Polyester按钮：
  • 首次点击：隐藏所有非Polyester类的元素，只显示Polyester元素。
  • 再次点击：恢复显示所有元素。
• Light按钮：
  • 若当前是全显示状态：点击后只显示Light类元素。
  • 若当前是仅显示Polyester的状态：点击后同时显示Polyester和Light类元素，隐藏其他。
  • 再次点击：回到点击前的显示状态（比如之前仅显示Polyester，就回到仅显示Polyester；之前全显示，就回到全显示）。

这样就完美实现了你要的“隐藏其余元素，但不隐藏当前已显示元素”的需求——点击Light按钮时，会保留当前已经显示的内容（比如Polyester），同时展示Light元素，隐藏其他无关项。

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