如何精简addEventListener硬编码实现的按钮点击切换对象显隐代码

核心思路是把重复的显隐、缩放逻辑抽成公共循环，统一给所有按钮绑定事件，不用逐按钮硬编码。
从你给出的硬编码代码可以看出固定对应规则：

• 编号为N的按钮，id格式为leg_typeN
• 按钮N对应的操作对象是Group1.children[N-1]
• 交互规则：仅当前点击对应的对象可见、缩放为(1,1,1)，其余所有对象隐藏、缩放为(0,0,0)

基础实现（适配1-10固定数量按钮） #

直接循环编号统一绑定事件，所有逻辑只写一次：

for (let n = 1; n <= 10; n++) {
  const button = document.getElementById(`leg_type${n}`);
  const activeChildIndex = n - 1;
  button.addEventListener('click', () => {
    Group1.children.forEach((child, index) => {
      const isActive = index === activeChildIndex;
      child.visible = isActive;
      child.scale.set(isActive ? 1 : 0, isActive ? 1 : 0, isActive ? 1 : 0);
    })
  })
}

这个实现和你原有硬编码的逻辑完全一致，没有行为差异。后续如果要调整显隐、缩放规则，只需要修改循环内的判断代码即可，不用逐个改每个按钮的绑定逻辑。

扩展实现（自动适配新增按钮） #

如果后续可能新增同规则按钮，不想每次改循环上限，可以给所有同类按钮加统一class（比如leg-type-btn），通过类选择器批量选中，自动从id提取编号绑定逻辑，新增按钮只要符合id命名规则、加上对应class就会自动生效，不用改JS代码：

document.querySelectorAll('.leg-type-btn').forEach(button => {
  // 从id中提取按钮编号
  const btnNumber = Number(button.id.replace('leg_type', ''));
  const activeChildIndex = btnNumber - 1;
  button.addEventListener('click', () => {
    Group1.children.forEach((child, index) => {
      const isActive = index === activeChildIndex;
      child.visible = isActive;
      child.scale.set(+isActive, +isActive, +isActive);
    })
  })
})

内容的提问来源于stack exchange，提问作者옥영빈