如何为两个复制按钮编写通用的剪贴板脚本？

我来帮你简化这段重复的代码！核心思路是用通用函数+数据属性来消除冗余，不管你以后要加多少个复制按钮，都不用再写新的函数啦。

第一步：优化HTML结构 #

我们给每个复制按钮加上data-target属性，用来关联它要复制的文本块；同时去掉每个tooltip的唯一ID，改用相对查找的方式获取，避免ID泛滥：

<p id="text1">Copy to clipboard 1</p>
<p id="text2">Copy to clipboard 2</p>

<div class="tooltip">
  <button onclick="copyText(event)" onmouseout="resetTooltip(event)" data-target="text1">
    <span class="tooltiptext">Copy to clipboard</span>
    Copy text
  </button>
</div>
<div class="tooltip">
  <button onclick="copyText(event)" onmouseout="resetTooltip(event)" data-target="text2">
    <span class="tooltiptext">Copy to clipboard</span>
    Copy text
  </button>
</div>

第二步：编写通用JS函数 #

现在只需要两个通用函数，就能处理所有复制按钮的逻辑：

<script>
function copyText(event) {
  // 获取当前点击的按钮
  const button = event.target.closest('button');
  // 从data-target属性拿到要复制的文本ID
  const targetId = button.dataset.target;
  // 获取要复制的文本内容
  const textToCopy = document.getElementById(targetId).innerText;
  
  // 复制到剪贴板
  navigator.clipboard.writeText(textToCopy);
  
  // 找到对应的tooltip，修改提示文本
  const tooltip = button.querySelector('.tooltiptext');
  tooltip.innerHTML = "Copied";
}

function resetTooltip(event) {
  // 找到当前按钮对应的tooltip，恢复提示文本
  const tooltip = event.target.closest('button').querySelector('.tooltiptext');
  tooltip.innerHTML = "Copy to clipboard";
}
</script>

为什么这样改更优？ #

• 无重复代码：不管你以后加10个还是100个复制按钮，只要给按钮加上data-target属性，就能直接复用这两个函数。
• 避免ID依赖：不用给每个tooltip和按钮加唯一ID，代码更简洁，也不会出现ID冲突的问题。
• 逻辑清晰：data-target明确建立了按钮和目标文本的关联，其他人看代码一眼就能懂。

如果以后需要扩展功能（比如复制失败提示），只需要在通用函数里修改一次，所有按钮都会生效，非常方便！

备注：内容来源于stack exchange，提问作者Jek94