在优化后的代码中，我们创建了一个名为 CopyableContAIner 的类，它包含一个构造函数，用于初始化 container、copyButton 和 copyMessage 元素。在 container 元素上添加点击事件监听器，然后使用一个函数来执行复制操作。在这个函数中，我们使用类似的代码来执行复制和提示操作。
然后，我们在主要的 JavaScript 代码中使用 querySelectorAll 方法获取所有的 container 元素，并遍历每个元素并将其传递给 CopyableContainer 的新实例。这样，每个容器内部就包含了一个独立的复制功能。
同时，我们还将 "复制" 按钮移动到容器的底部。这样我们就可以在容器的顶部添加自定义的内容，而不会影响到复制按钮的样式和位置。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>一键复制容器内的内容</title> <style> .container { background-color: #f8f9fa; padding: 16px; border-radius: 4px; position: relative; } .copy-button { background-color: #007bff; color: #fff; border: none; border-radius: 4px; padding: 8px 16px; margin-bottom: 16px; cursor: pointer; position: absolute; right: 16px; bottom: 16px; } .copy-message { position: fixed; top: 0; left: 50%; transform: translateX(-50%); padding: 8px 16px; Font-size: 14px; color: #fff; border-radius: 4px; opacity: 0; transition: opacity 0.3s ease; } .copy-message.success { background-color: #28a745; } .copy-message.fail { background-color: #dc3545; } .copy-message.show { opacity: 1; } </style> </head> <body> <DIV class="container"> <h1>第一个容器</h1> <p>这是第一个容器的段落。</p> <pre><code>这是第一个容器的代码块。</code></pre> <button class="copy-button">复制</button> </div> <div class="container"> <h1>第二个容器</h1> <p>这是第二个容器的段落。</p> <pre><code>这是第二个容器的代码块。</code></pre> <button class="copy-button">复制</button> </div> <div class="copy-message"></div> <scrIPt> class CopyableContainer { constructor(containerElement) { this.containerElement = containerElement; this.copyButton = containerElement.querySelector('.copy-button'); this.copyMessage = document.querySelector('.copy-message'); this.copyButton.addEventlistener('click', () => { const range = document.createRange(); range.selectNode(this.containerElement); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); try { const successful = document.execCommAND('copy'); if (successful) { this.copyButton.textContent = ' √ 已复制'; this.copyMessage.textContent = '已复制到剪贴板'; this.copyMessage.className = 'copy-message show success'; } else { this.copyMessage.textContent = '未能复制到剪贴板'; this.copyMessage.className = 'copy-message show fail'; } } catch (err) { console.log('无法复制到剪贴板', err); this.copyMessage.textContent = '无法复制到剪贴板'; this.copyMessage.className = 'copy-message show fail'; } setTimeout(() => { this.copyButton.textContent = '复制'; this.copyMessage.className = 'copy-message'; }, 2000); window.getSelection().removeAllRanges(); }); } } const containers = document.querySelectorAll('.container'); for (let i = 0; i < containers.length; i++) { const container = new CopyableContainer(containers[i]); } </script> </body> </html>