JS手风琴点击URL图标复制链接始终复制首项问题修复

代码存在两个逻辑/规范错误：

• 三个存储链接的<input>元素使用了重复的id值myInput。HTML标准规定id在单页面内必须全局唯一，重复id时调用document.getElementById("myInput")永远只会返回页面中第一个匹配到的元素，这是点击任意按钮都只复制第一个链接的核心原因。
• 复制逻辑没有和点击事件的触发源绑定，函数无法感知用户当前点击的是哪一个按钮，自然找不到对应链接。

1. 调整HTML部分 #

• 移除三个input上重复的id="myInput"属性，避免id冲突
• 给所有绑定onclick="myFunction()"的元素传入当前节点对象this，让函数可以拿到点击源
  修改后单个手风琴内容块结构示例：

<div class="content">
  <div class="tooltip">
    <div class="whitepaper" onclick="myFunction(this)">
      <div class="blackframe">
        <span class="tooltiptext">Copy link 1 to clipboard</span>URL
      </div>
    </div>
    <input type="text" value="https://mywebsite.com/#title1">
  </div>
</div>

其余两个内容块只需要保留自身对应的value值，同样给onclick传入this、去掉重复id即可。

2. 重写JS复制函数 #

通过传入的点击源节点，向上查找所属的.tooltip父容器，再定位到容器内部对应的input元素，即可精准获取当前项的链接，修改后的代码如下：

function myFunction(clickEl) {
  // 定位当前按钮所在的tooltip容器
  const currentTooltip = clickEl.closest('.tooltip');
  // 查找容器内对应的链接输入框
  const copyInput = currentTooltip.querySelector('input[type="text"]');

  // 选中内容，兼容移动端
  copyInput.select();
  copyInput.setSelectionRange(0, 99999);

  // 写入剪贴板
  navigator.clipboard.writeText(copyInput.value);

  // 复制结果提示
  alert("已复制链接：" + copyInput.value);
}

这种基于DOM相对位置查找元素的写法扩展性更好，后续新增任意多个手风琴项时，只要保持.tooltip容器包裹按钮和对应输入框的结构不变，不需要修改JS代码，复制功能可以直接正常使用。

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