JavaScript实现多元素加类排除指定元素 遵循DRY原则简化重复代码

你的需求是典型的「单选式激活」交互，核心逻辑是点击某元素时仅保留它的激活状态，其他同类元素取消激活，完全可以通过封装通用函数+批量绑定事件实现，消除重复代码。

方案1：通用灵活写法（推荐） #

不需要逐个定义元素常量，后续新增菜单选项无需修改JS逻辑：

// 批量获取所有需要绑定激活逻辑的链接元素
const rankLinks = document.querySelectorAll('.link-ranking');
// 定义激活类名常量，避免硬编码
const ACTIVE_CLASS = 'link-ranking-active';

// 实现ToggleClass功能
function toggleActiveClass(currentEl) {
  // 遍历所有链接，统一移除激活类
  rankLinks.forEach(link => link.classList.remove(ACTIVE_CLASS));
  // 仅给当前点击的元素添加激活类
  currentEl.classList.add(ACTIVE_CLASS);
}

// 批量绑定点击事件，无需逐个编写监听逻辑
rankLinks.forEach(link => {
  link.addEventListener('click', () => toggleActiveClass(link));
});

省去了冗余的类名存在判断：直接全量移除再给当前元素添加，最终效果和你原有逻辑完全一致，代码更简洁。

方案2：匹配你初始设想的函数结构 #

如果你需要保留单独的元素常量定义，可使用以下写法，完全符合你最初的函数设计思路：

const GoogleConst = document.getElementById('Google');
const FacebookConst = document.getElementById('Facebook');
const ComparisonConst = document.getElementById('Comparison');
const allLinks = [GoogleConst, FacebookConst, ComparisonConst];
const ACTIVE_CLASS = 'link-ranking-active';

function ToggleClass(element) {
  // 遍历所有关联元素，移除除当前元素外的所有激活类
  allLinks.forEach(link => {
    if (link !== element) {
      link.classList.remove(ACTIVE_CLASS);
    }
  });
  element.classList.add(ACTIVE_CLASS);
}

// 绑定事件
GoogleConst.addEventListener('click', () => ToggleClass(GoogleConst));
FacebookConst.addEventListener('click', () => ToggleClass(FacebookConst));
ComparisonConst.addEventListener('click', () => ToggleClass(ComparisonConst));

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