Clipboard.JS 如何让新的字符串在'success' 事件的前面？

Question

我正在使用 'success' 事件在有人点击后更改按钮文本。

原来的按钮文字在span里面，会被动画覆盖，所以我用CSS规则： z-index 和 color 使文本可见并在前面。

问题是调用函数后文本将隐藏在动画下，因为新字符串不再在 span 中。

如何在 span 中创建新字符串，以便 CSS 仍然可以使其位于前面？

下面是我的代码：

var clipboard = new ClipboardJS('.copyElement')

clipboard.on('success', function(e) {
    let oldtext = e.trigger.textContent
    e.trigger.textContent = 'Copied!'
    setTimeout(() => e.trigger.textContent = oldtext, 2000)
});

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 330px;
}

.copyElement {
  cursor: pointer;
}

.Big {
  width: 257px;
  padding: 33px 0 30px 0;
  font-size: 21px;
}

.Medium {
  width: 210px;
  padding: 27px 0 24px 0;
  font-size: 18px;
  margin: 30px 0;
}

.Small {
  width: 150px;
  padding: 21px 0 18px 0;
  font-size: 15px;
}

.ButtonMain {
  background-color: #e6e6e6;
  position: relative;
  overflow: hidden;
  border: none;
}

.ButtonMain::before,
.ButtonMain::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ButtonMain span {
  position: relative;
  color: #fff;
}

.ButtonMain:hover span {
  color: #000;
  transition: color 0.3s ease 0s;
}

.RedRevealEffect::before {
  content: '';
  background: #ef476f;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.RedRevealEffect:hover::before {
  transform: translate3d(100%,0,0);
}

<button
  class="copyElement ButtonMain RedRevealEffect Small"
  data-clipboard-text="123"
>
  <span>Take Me There</span>
</button>
<button
  class="copyElement ButtonMain RedRevealEffect Medium"
  data-clipboard-text="456"
>
  <span>Take Me There</span>
</button>
<button
  class="copyElement ButtonMain RedRevealEffect Big"
  data-clipboard-text="789"
>
  <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

因为按钮的文本位于 span 内。使用 querySelector('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;
}

.copyElement {
  cursor: pointer;
}

.Big {
  width: 257px;
  padding: 33px 0 30px 0;
  font-size: 21px;
}

.Medium {
  width: 210px;
  padding: 27px 0 24px 0;
  margin: 30px 0;
}

.Small {
  width: 150px;
  padding: 21px 0 18px 0;
  font-size: 15px;
}

.ButtonMain {
  background-color: #e6e6e6;
  position: relative;
  overflow: hidden;
  border: none;
}

.ButtonMain::before,
.ButtonMain::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ButtonMain span {
  position: relative;
  color: #fff;
}

.ButtonMain:hover span {
  color: #000;
  transition: color 0.3s ease 0s;
}

.RedRevealEffect::before {
  content: '';
  background: #ef476f;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.RedRevealEffect:hover::before {
  transform: translate3d(100%,0,0);
}

<button
  class="copyElement ButtonMain RedRevealEffect Small"
  data-clipboard-text="123"
>
  <span>Take Me There</span>
</button>
<button
  class="copyElement ButtonMain RedRevealEffect Medium"
  data-clipboard-text="456"
>
  <span>Take Me There</span>
</button>
<button
  class="copyElement ButtonMain RedRevealEffect Big"
  data-clipboard-text="789"
>
  <span>Take Me There</span>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

Clipboard.JS 如何让新的字符串在'success' 事件的前面？

Clipboard.JS How to make the new string to front with 'success' event?

javascript

clipboard.js