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