JavaScript实现多文本复制功能：解决多个按钮的剪贴板操作问题

var copyBtn = document.querySelector('.js-copybtn'); // 获取第一个复制按钮
if (copyBtn) {
    copyBtn.addEventListener('click', function(event) {
        var copyText = document.querySelector('.js-copytext'); // 获取第一个文本元素
        // ... 复制逻辑 ...
    });
}

<div class="context">
    <span class="js-copytext"><p>这是第一段需要复制的文本。</p></span>
    <button class="btn btn-default js-copybtn CP"> 复制文本1 </button>
</div>

<div class="context">
    <span class="js-copytext"><p>这是第二段需要复制的文本。</p></span>
    <button class="btn btn-default js-copybtn CP"> 复制文本2 </button>
</div>

<div class="context">
    <span class="js-copytext"><p>这是第三段需要复制的文本。</p></span>
    <button class="btn btn-default js-copybtn CP"> 复制文本3 </button>
</div>

var copyBtns = document.querySelectorAll('.js-copybtn');

if (copyBtns && copyBtns.length) {
    copyBtns.forEach((copyBtn) => {
        copyBtn.addEventListener('click', function(event) {
            // ... 事件处理逻辑 ...
        });
    });
}

// 在事件监听器内部
var copyText = copyBtn.previousElementSibling; // 获取当前按钮的前一个兄弟元素

// 在事件监听器内部
var range = document.createRange();
range.selectNode(copyText); // 选中目标文本节点
window.getSelection().addRange(range); // 将范围添加到当前选择中

try {
    var successful = document.execCommand('copy'); // 执行复制命令
    var msg = successful ? '复制成功' : '复制失败';
    console.log(msg); // 可在此处添加用户反馈
} catch(err) {
    console.error('复制操作出错:', err);
}

window.getSelection().removeAllRanges(); // 清除选择，避免页面上留下高亮

/**
 * 初始化页面上所有复制按钮的复制功能。
 * 每个按钮将复制其紧邻的前一个兄弟元素（假设为文本内容）。
 */
function initializeMultiCopyButtons() {
    // 1. 获取所有具有 '.js-copybtn' 类的按钮元素
    var copyBtns = document.querySelectorAll('.js-copybtn');

    // 检查是否找到了任何按钮
    if (copyBtns && copyBtns.length > 0) {
        // 2. 遍历每个按钮，并为其添加点击事件监听器
        copyBtns.forEach((copyBtn) => {
            copyBtn.addEventListener('click', function(event) {
                // 3. 定位与当前按钮关联的文本元素
                // 假设文本元素是按钮的前一个兄弟元素
                var copyTextElement = copyBtn.previousElementSibling;

                // 确保找到了文本元素
                if (!copyTextElement) {
                    console.error('未找到与复制按钮关联的文本元素。请检查HTML结构。', copyBtn);
                    return;
                }

                // 4. 创建一个范围并选中文本内容
                var range = document.createRange();
                range.selectNode(copyTextElement); // 选中整个文本元素
                window.getSelection().addRange(range); // 将该范围添加到当前选择中

                // 5. 执行复制命令并处理结果
                try {
                    var successful = document.execCommand('copy');
                    var msg = successful ? '复制成功！' : '复制失败！';
                    console.log(msg);
                    // 可以在此处添加用户反馈，例如：
                    // showTemporaryMessage(copyBtn, msg);
                } catch(err) {
                    console.error('复制操作出错:', err);
                    // showTemporaryMessage(copyBtn, '复制失败: ' + err.message);
                }

                // 6. 清除当前的选择，避免页面上留下高亮
                window.getSelection().removeAllRanges();
            });
        });
    } else {
        console.warn('页面上未找到任何具有 ".js-copybtn" 类的复制按钮。');
    }
}

// 在DOM内容加载完毕后执行初始化函数
document.addEventListener('DOMContentLoaded', initializeMultiCopyButtons);