如何通过循环自动为多个ID添加和移除active类

嘿，这个需求太常见啦！我给你分享几个实用的实现思路，不管你用原生JS还是jQuery都能轻松搞定～

方案1：原生JS（已知元素数量时使用） #

如果你明确知道这些元素的数量（比如从sat0到sat9共10个），可以直接通过循环数字来定位元素：

// 先定义元素总数
const totalSatElements = 10;

// 封装移除所有active类的函数
function removeAllActiveClasses() {
  for (let i = 0; i < totalSatElements; i++) {
    const currentSat = document.getElementById(`sat${i}`);
    // 做个判断避免找不到元素报错
    if (currentSat) {
      currentSat.classList.remove('active');
    }
  }
}

// 封装给指定元素添加active的函数（先清再加，保证唯一激活）
function setActiveSat(index) {
  removeAllActiveClasses();
  const targetSat = document.getElementById(`sat${index}`);
  if (targetSat) {
    targetSat.classList.add('active');
  }
}

// 调用示例：激活sat3
setActiveSat(3);

方案2：原生JS（动态匹配所有目标元素，更灵活） #

如果后续可能新增更多sat元素（比如sat10、sat11），用类选择器动态获取所有目标元素会更省心，不用修改代码：

// 一次性获取所有带sat类的元素
const allSatElements = document.querySelectorAll('.sat');

// 移除所有active类
function removeAllActiveClasses() {
  allSatElements.forEach(element => {
    element.classList.remove('active');
  });
}

// 给指定索引的元素添加active
function setActiveSat(index) {
  // 先判断索引是否合法
  if (index >= 0 && index < allSatElements.length) {
    removeAllActiveClasses();
    allSatElements[index].classList.add('active');
  }
}

// 调用示例：激活第5个元素（索引从0开始，对应sat4）
setActiveSat(4);

方案3：jQuery写法（如果项目依赖jQuery） #

如果你的项目已经引入了jQuery，写法会更简洁：

// 移除所有active类
function removeAllActiveClasses() {
  $('.sat').removeClass('active');
}

// 给指定索引的元素添加active
function setActiveSat(index) {
  removeAllActiveClasses();
  // 用eq选择器直接定位对应索引的元素
  $(`.sat:eq(${index})`).addClass('active');
}

// 调用示例：激活sat2
setActiveSat(2);

小提示 #

如果是要做交互切换（比如点击按钮切换激活状态），可以结合事件监听：

// 假设你有一组控制按钮，每个按钮对应一个sat元素
document.querySelectorAll('.sat-toggle-btn').forEach((btn, index) => {
  btn.addEventListener('click', () => {
    setActiveSat(index);
  });
});

记住：一定要先移除所有元素的active类，再给目标元素添加，这样能保证同一时间只有一个元素处于激活状态哦～

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