如何用原生JS（Vanilla JS）优雅实现点击li批量替换多个div内容？

嘿，我来帮你把这段代码优化得更简洁优雅！你现在的实现里有重复的函数逻辑和冗余的内联事件，咱们可以通过几个小调整让代码更易维护、更干净：

核心优化思路 #

• 合并重复的函数逻辑：两个替换函数功能完全一致，没必要写两份
• 移除内联onClick事件：用事件委托让HTML结构更清爽，也方便后续扩展
• 用data-*属性传递参数：把需要替换的目标和源ID存在元素的自定义属性里，不用硬写在事件调用里

优化后的完整代码 #

HTML部分 #

<body>
  <!-- 给li的父元素加个ul，方便做事件委托 -->
  <ul class="content-switcher">
    <li data-targets='["target", "targetTwo"]' data-sources='["replace_target_div2", "replace_target_div2_02"]'>View Div 2</li>
    <li data-targets='["target", "targetTwo"]' data-sources='["replace_target_div3", "replace_target_div3_02"]'>View Div 3</li>
  </ul>

  <div>
    <span id="target">div1</span>
  </div>
  <div style="display:none">
    <span id="replace_target_div2">div2</span>
  </div>
  <div style="display:none">
    <span id="replace_target_div3">div3</span>
  </div>

  <div>
    <span id="targetTwo">div1</span>
  </div>
  <div style="display:none">
    <span id="replace_target_div2_02">div2 02</span>
  </div>
  <div style="display:none">
    <span id="replace_target_div3_02">div3 03</span>
  </div>
</body>

JS部分 #

// 通用的内容替换函数，支持处理多组目标和源
function replaceContent(targetIds, sourceIds) {
  // 遍历每一组对应关系，执行替换
  targetIds.forEach((targetId, index) => {
    const targetEl = document.getElementById(targetId);
    const sourceEl = document.getElementById(sourceIds[index]);
    if (targetEl && sourceEl) {
      targetEl.innerHTML = sourceEl.innerHTML;
    }
  });
}

// 事件委托：绑定在父元素ul上，处理所有li的点击事件
document.querySelector('.content-switcher').addEventListener('click', (e) => {
  // 确保点击的是li元素
  if (e.target.tagName === 'LI') {
    // 从data属性里解析出目标和源的ID数组
    const targets = JSON.parse(e.target.dataset.targets);
    const sources = JSON.parse(e.target.dataset.sources);
    // 调用通用替换函数
    replaceContent(targets, sources);
  }
});

为什么这样更好？ #

1. 复用性更强：一个replaceContent函数就能处理任意多组的内容替换，不管你以后要加3个还是5个目标div，都不用再写新函数
2. HTML更干净：内联事件被移除，所有逻辑都集中在JS里，后期修改参数只需要改data属性或者JS，不用在HTML和JS之间来回跳
3. 可维护性更高：事件委托只需要绑定一次，就算后续动态添加新的li元素，也能自动生效，不用重新绑定事件
4. 容错性更好：加了if (targetEl && sourceEl)的判断，避免因为ID写错导致报错中断其他逻辑

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