如何将新字符串定位到特定的跨度

Question

我正在使用Clipboard.JS中的"success"事件来更改按钮文本，因为有人点击了它，以提供文本已成功复制的反馈。

button元素中有多个span，当调用函数时，反馈/新字符串(Copied！(将替换原始文本(Take Me There(并应用于第一个span。

如果反馈/新字符串应用于第一个span，则原始文本(Take Me There(将不会被替换，相反，反馈将显示在顶部，因为它应用于第一次span。

如何使span的新字符串包含原始文本(最后一个跨度(？请尝试运行代码以获得更清晰的说明。

以下是我的代码：

var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let span = e.trigger.querySelector('span')
let oldtext = span.textContent
span.textContent = 'Copied!'
setTimeout(() => span.textContent = oldtext, 2000)
});

body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 330px;
background-color: #000;
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
.RedPhotonEffect {
color: rgba(239, 71, 111, 1);
overflow: hidden;
position: relative;
border: none;
background-color: rgba(239, 71, 111, 0.12);
cursor: pointer;
}
.RedPhotonEffect span:nth-child(1){
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #000, #ef476f);
animation: animate1 3s linear infinite;
animation-delay: 1.5s;
}
@keyframes animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.RedPhotonEffect span:nth-child(2){
position:absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, #000, #ef476f);
animation: animate2 3s linear infinite;
}
@keyframes animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.RedPhotonEffect span:nth-child(3){
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, #000, #ef476f);
animation: animate3 3s linear infinite;
animation-delay: 1.5s;
}
@keyframes animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.RedPhotonEffect span:nth-child(4){
position:absolute;
bottom: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top, #000, #ef476f);
animation: animate4 3s linear infinite;
}
@keyframes animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}

<button
class="copyElement RedPhotonEffect Big"
data-clipboard-text="123"
>
<span></span>
<span></span>
<span></span>
<span></span>
<span>Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

Answer 1

然后尝试使用类代替

var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let span = e.trigger.querySelector('.label')
let oldtext = span.textContent
span.textContent = 'Copied!'
setTimeout(() => span.textContent = oldtext, 2000)
});

body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 330px;
background-color: #000;
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
.RedPhotonEffect {
color: rgba(239, 71, 111, 1);
overflow: hidden;
position: relative;
border: none;
background-color: rgba(239, 71, 111, 0.12);
cursor: pointer;
}
.RedPhotonEffect span:nth-child(1){
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #000, #ef476f);
animation: animate1 3s linear infinite;
animation-delay: 1.5s;
}
@keyframes animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.RedPhotonEffect span:nth-child(2){
position:absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, #000, #ef476f);
animation: animate2 3s linear infinite;
}
@keyframes animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.RedPhotonEffect span:nth-child(3){
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, #000, #ef476f);
animation: animate3 3s linear infinite;
animation-delay: 1.5s;
}
@keyframes animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.RedPhotonEffect span:nth-child(4){
position:absolute;
bottom: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top, #000, #ef476f);
animation: animate4 3s linear infinite;
}
@keyframes animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}

<button
class="copyElement RedPhotonEffect Big"
data-clipboard-text="123"
>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="label">Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>