调用options.every()提示is not a function，求解决方案

核心问题分析 #

你遇到的报错是因为 document.querySelectorAll() 返回的是NodeList对象，它不是标准数组，部分环境下不支持数组的 every() 方法。同时代码还有两个逻辑bug：

• every() 的回调函数没有返回值，导致判断逻辑完全失效
• 点击事件里重复调用了 btn.classList.toggle('active')，会让按钮状态反复切换，出现异常

修正后的完整代码 #

let btnsClassOfProducts = document.querySelectorAll('span[data-class="products"]');
let btnProductsAllProducts = document.querySelector('span[data-class="allProductsProducts"]');

// 把NodeList转成标准数组，确保能使用所有数组方法
const optionsArray = Array.from(btnsClassOfProducts);

function sortingUiEffect(options, all) {
  options.forEach((btn) => {
    btn.onclick = function() {
      // 如果"全部"按钮处于激活状态，先取消它
      if (all.classList.contains('active')) {
        all.classList.remove('active');
      }

      // 切换当前点击按钮的激活状态
      btn.classList.toggle('active');

      // 检查所有选项是否都处于激活状态（必须返回判断结果）
      const allOptionsActive = options.every((btnItem) => {
        return btnItem.classList.contains('active');
      });

      if (allOptionsActive) {
        // 全部激活时，取消所有选项的激活状态，转而激活"全部"按钮
        options.forEach((btnItem) => {
          btnItem.classList.remove('active');
        });
        all.classList.add('active');
      }
    };
  });

  all.onclick = function() {
    options.forEach((btn) => {
      btn.classList.remove('active');
    });
    all.classList.add('active');
  };
}

sortingUiEffect(optionsArray, btnProductsAllProducts);

关键修改说明 #

1. NodeList转数组：用 Array.from() 把查询结果转成标准数组，这样就能安全使用 every()、filter() 等数组原生方法
2. 修复every回调：在回调函数里添加 return，否则 every() 会把每个元素的判断结果视为 undefined，导致判断逻辑完全错误
3. 移除重复toggle：删掉原代码中else分支的重复toggle调用，避免按钮状态被反复切换
4. 简化逻辑流程：把"全部"按钮的状态处理提前，让代码逻辑更清晰易懂

内容的提问来源于stack exchange，提问作者Ovidiu-Alexandru Iftemie