在优化后的代码中，我们创建了一个名为 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>