如何用JavaScript实现点击copy-me元素复制对应copy-text文本？

问题需求 #

点击class为copy-me的元素时，复制同一结构下class为copy-text的<p>元素中的文本。

提供的HTML结构 #

<div class="text">
    <div class="text-wrapper">
        <p class="copy-text">This will be copy</p>

        <div class="bottom-element">
            <span class="i-text">Share</span>

            <span class="copy-me"> Copy Text </span>
        </div>
    </div>
</div>

<div class="text">
    <div class="text-wrapper">
        <p class="copy-text">This will be copy</p>

        <div class="bottom-element">
            <span class="i-text">Share</span>

            <span class="copy-me"> Copy Text </span>
        </div>
    </div>
</div>
<div class="text">
    <div class="text-wrapper">
        <p class="copy-text">This will be copy</p>

        <div class="bottom-element">
            <span class="i-text">Share</span>

            <span class="copy-me"> Copy Text </span>
        </div>
    </div>
</div>

未完成的尝试代码 #

document.querySelectorAll('.copy-me').forEach(() => {

}

解决方案 #

以下是完整的可运行代码，包含复制逻辑和用户反馈：

document.querySelectorAll('.copy-me').forEach(btn => {
  btn.addEventListener('click', function() {
    // 定位当前按钮所属的父容器
    const parentWrapper = this.closest('.text-wrapper');
    // 获取目标文本内容
    const targetText = parentWrapper.querySelector('.copy-text').textContent.trim();

    // 执行复制操作
    navigator.clipboard.writeText(targetText)
      .then(() => {
        // 复制成功提示
        this.textContent = '已复制';
        setTimeout(() => {
          this.textContent = ' Copy Text ';
        }, 3000);
      })
      .catch(error => {
        console.error('复制失败:', error);
      });
  });
});

关键逻辑说明 #

• this.closest('.text-wrapper'): 从点击的按钮向上查找最近的text-wrapper容器，确保只操作当前结构内的元素，不会干扰其他模块
• parentWrapper.querySelector('.copy-text'): 在父容器内精准定位目标文本元素，避免全局查找引发的错误
• navigator.clipboard.writeText(): 现代浏览器原生剪贴板API，操作更安全简洁
• 加入了文本切换的反馈，让用户明确知道复制状态

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