为何仅最后一个.js-player元素触发#mute添加.active类？求排查思路

嘿，我来帮你捋捋这个问题哈！你想实现的是当任意一个.js-player元素的top值处于10-100之间时，给#mute添加.active类，但现在代码只会根据最后一个.js-player的位置来决定是否加类，前面元素的判断结果都被覆盖了。

问题根源 #

你当前的代码逻辑是在forEach循环里，每遍历一个player就直接修改#mute的类名：

• 如果当前player满足条件，就加.active
• 如果不满足，就可能移除.active（从现象反推，你代码里应该有对应的移除逻辑）

这就导致前面的player满足条件时加上的类，会被后面不满足条件的player给移除掉，最后只有最后一个player的判断结果会保留下来，自然就只对最后一个元素生效了。

修复方案 #

咱们换个思路：先判断是否存在至少一个.js-player满足位置条件，再统一修改#mute的类名，而不是逐个修改。

修改后的代码示例：

const players = Array.from(document.querySelectorAll('.js-player')),
      mute = document.querySelector('#mute');

window.addEventListener('scroll', function(e) {
  // 先判断是否有任意一个player满足条件
  const hasActivePlayer = players.some(function(player) {
    const rect = player.getBoundingClientRect();
    // 这里判断top值在10到100之间
    return rect.top >= 10 && rect.top <= 100;
  });

  // 根据结果添加或移除类
  if (hasActivePlayer) {
    mute.classList.add('active');
  } else {
    mute.classList.remove('active');
  }
});

关键改进点 #

• 使用Array.prototype.some()替代forEach：some()会在找到第一个满足条件的元素后就停止遍历，效率更高，而且直接返回布尔值，方便我们判断是否需要给#mute加类。
• 统一修改类名：不再逐个修改，而是先确定整体条件是否满足，再一次性处理#mute的类，避免了前面的结果被后面覆盖的问题。

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