如何减少实现A-Z字母左右侧切换功能所需的函数数量

方案1：参数化通用函数（改动最小） #

将原有逻辑封装为可接收字母标识的通用函数，仅需1个函数即可覆盖所有字母的切换需求：

function toggleLetter(letter) {
  const leftEl = document.getElementById(`${letter}LetterLeftSide`);
  const rightEl = document.getElementById(`${letter}LetterRightSide`);
  // 支持双向切换，点击右侧字母也可移回左侧
  const leftVisible = leftEl.style.display !== 'none';
  leftEl.style.display = leftVisible ? 'none' : 'inline-block';
  rightEl.style.display = leftVisible ? 'inline-block' : 'none';
}

给字母元素绑定事件时直接传入对应字母即可，比如左侧A元素的点击属性写为onclick="toggleLetter('a')"，右侧A元素同样使用onclick="toggleLetter('a')"即可，不需要单独写逻辑。

注意修正原有id拼写错误：RigtSide应为RightSide，避免元素查找失败。

方案2：事件委托（易维护，适合多元素场景） #

如果后续还会新增字母，推荐用事件委托方案，不需要给每个字母单独绑定事件、也不需要给每个字母设置id，仅需一段JS即可完成所有逻辑：

1. 先给左右两个字母容器分别加类名标识，给每个字母元素加data-letter自定义属性存对应字母：

<!-- 左侧字母容器 -->
<div class="letter-container left">
  <span data-letter="a">A</span>
  <span data-letter="b">B</span>
  <!-- 其余字母直接在此处新增即可，无需修改JS -->
</div>
<!-- 右侧字母容器 -->
<div class="letter-container right">
  <span data-letter="a">A</span>
  <span data-letter="b">B</span>
  <!-- 其余字母直接在此处新增即可，无需修改JS -->
</div>

2. 仅需编写一段全局事件绑定逻辑：

document.querySelectorAll('.letter-container').forEach(container => {
  container.addEventListener('click', e => {
    const letterEl = e.target.closest('[data-letter]');
    if (!letterEl) return;

    const letter = letterEl.dataset.letter;
    const isClickLeft = container.classList.contains('left');
    const leftLetter = document.querySelector(`.left [data-letter="${letter}"]`);
    const rightLetter = document.querySelector(`.right [data-letter="${letter}"]`);

    leftLetter.style.display = isClickLeft ? 'none' : 'inline-block';
    rightLetter.style.display = isClickLeft ? 'inline-block' : 'none';
  });
});

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