如何为两个按钮分别实现差异化的剪贴板复制功能

嘿，我看你现在的需求是让两个按钮分别复制不同的内容（12345和54321）对吧？原来的代码里有几个小问题导致没法实现：一是重复定义了copyText函数，后面的会把前面的覆盖掉；二是函数里的写法（比如p1 navigator.clipboard.writeText(...)）是语法错误，而且根本没区分是哪个按钮被点击了。

下面给你两种简单可行的解决办法：

方法一：给函数传递参数（最直接的方式） #

这种方式让每个按钮在调用函数时，明确告诉它要复制的内容，逻辑清晰又好维护。

首先修改你的JavaScript函数，让它能接收一个参数：

function copyText(textToCopy) {
  // 复制指定内容到剪贴板
  navigator.clipboard.writeText(textToCopy)
    .then(() => {
      // 可选：给用户一个复制成功的反馈，比如修改按钮文字
      event.target.textContent = "已复制!";
      // 1.5秒后恢复按钮原文字
      setTimeout(() => {
        event.target.textContent = "copied";
      }, 1500);
    })
    .catch(err => {
      // 如果复制失败，在控制台打印错误信息
      console.error('复制失败:', err);
    });
}

然后更新HTML里的按钮，调用函数时传入对应的内容：

<p id="p1">
  <div class="enabled-left-icon-4-9z5">
    <button onclick="copyText('12345')">copied</button>
  </div>
</p>

<p id="p2">
  <div class="enabled-left-icon-5-MqF">
    <button onclick="copyText('54321')">copied</button>
  </div>
</p>

方法二：通过元素标识区分按钮 #

如果你的内容是动态生成的，或者不想直接在onclick里写参数，可以通过按钮所在的父元素ID来判断要复制的内容。

JavaScript函数改成这样：

function copyText() {
  let textToCopy;
  // 根据点击按钮所在的父元素ID判断要复制的内容
  if (event.target.closest('#p1')) {
    textToCopy = '12345';
  } else if (event.target.closest('#p2')) {
    textToCopy = '54321';
  }
  
  if (textToCopy) {
    navigator.clipboard.writeText(textToCopy)
      .then(() => {
        event.target.textContent = "已复制!";
        setTimeout(() => {
          event.target.textContent = "copied";
        }, 1500);
      })
      .catch(err => {
        console.error('复制失败:', err);
      });
  }
}

HTML部分不需要修改按钮的onclick，保持原来的onclick="copyText()"就行，只要确保p1和p2的ID正确即可。

另外要注意：原来的代码里重复定义了两次copyText函数，这会导致后面的函数覆盖前面的，所以一定要只保留一个函数定义哦！

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