在querySelectorAll中使用:not()时调用变量失效的问题求助

你的核心问题是选择器字符串里的变量没有被解析：querySelectorAll('.card:not(_toShow)')中的_toShow被当成了CSS选择器的字面量，而不是你定义的JS变量。CSS选择器无法直接识别JS变量，必须把变量值插入到选择器字符串中。

修复后的基础代码 #

用ES6模板字符串（反引号包裹）可以直接插入变量，这是最简洁的写法：

function _hide() {
  // 获取要保留的类对应的选择器字符串
  let _toShow = "." + document.getElementById("fb-select").value;
  // 用模板字符串将变量注入选择器
  let cards = document.querySelectorAll(`.card:not(${_toShow})`);
  // 隐藏匹配的元素
  cards.forEach((card) => {
    card.style.scale = "0";
    card.style.opacity = "0";
  });
}

关键修改点 #

• 把选择器字符串从单引号改为模板字符串（`），通过${_toShow}将变量值插入到选择器中。
• 原代码中节点列表变量名card和循环参数名重复，改成cards避免变量名冲突。

更优的实现方案（推荐） #

直接操作style属性不利于维护，建议用CSS类来控制显示隐藏，实现样式与逻辑分离：

CSS 代码

.card {
  transition: all 0.3s ease; /* 可选：添加平滑过渡动画 */
}
.card.hidden {
  scale: 0;
  opacity: 0;
}

JavaScript 代码

function _hide() {
  const targetClass = document.getElementById("fb-select").value;
  // 先重置所有卡片的显示状态
  document.querySelectorAll('.card').forEach(card => {
    card.classList.remove('hidden');
  });
  // 给不需要显示的卡片添加隐藏类
  document.querySelectorAll(`.card:not(.${targetClass})`).forEach(card => {
    card.classList.add('hidden');
  });
}

这种方式的好处是：样式统一在CSS中管理，后续修改动画或隐藏样式时无需改动JS，代码更易维护。

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