Clipboard.JS 如何使用“成功”事件将新字符串置于前面？

Question

I'm using the 'success' event to change the button text after someone have clicked it.

The original button text is in span and it will be covered by the animation, so I use CSS rule: z-index and color to make the text visible and to the front.

The problem is the text will be hidden under the animation after the function is invoked because the new string is not in span anymore.

How do I make the new string in span so the CSS will still work to make it front?

Below is my code:

 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

Because the button's text lies inside the span . Use querySelector('span') to change the span's text

 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>