Clipboard.js 循环按钮

Question

我使用 clipboard.js，点击其中一个按钮后，我想在按钮下方显示一条成功消息，但我无法循环。

这是按钮：

<button type="button" class="clipboard-button button-rect" data-clipboard-text="{{ site.author.email|safe_email }}">
  <span class="button-text">Get in touch</span>
  <span class="clipboard-message">My E-Mail has been copied</span>
</button>

这是 js:

var clipboard = new ClipboardJS('.clipboard-button');

clipboard.on('success', function () {
    var message = document.querySelectorAll('.clipboard-message');
    message.style.opacity = '1';
    setTimeout(function () {
        message.style.opacity = '0';
    }, 2000);
});

我想在按下的按钮下方显示消息，而不是为每个按钮显示消息。

非常感谢您的帮助，我已经尽力了。顺便说一句，我是 JS 初学者，所以请耐心等待。 :)

Answer 1

您应该注意的是实现检索单击的 DOM 元素（在本例中为按钮）。然后很容易找到相应的 .clipboard-message span 元素。

要检索单击的元素，您可以使用提供给 success 事件回调函数的参数，如下所述：https://clipboardjs.com/#events

然后你的JavaScript代码变成：

var clipboard = new ClipboardJS('.clipboard-button');

clipboard.on('success', function (e) {
    // e.trigger corresponds to the clipboard-button DOM element that triggered the event
    // You can then use querySelector(...) to retrieve to first child element with the class clipboard-message
    var message = e.trigger.querySelector('.clipboard-message');
    message.style.opacity = '1';
    setTimeout(function () {
        message.style.opacity = '0';
    }, 2000);
});

这里有一个工作代码片段供您尝试：

var clipboard = new ClipboardJS('.clipboard-button');

clipboard.on('success', function (e) {
    var message = e.trigger.querySelector('.clipboard-message');
    message.style.opacity = '1';
    setTimeout(function () {
        message.style.opacity = '0';
    }, 2000);
});

.clipboard-message {
    color: green;
    opacity: 0;
}

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<button type="button" class="clipboard-button button-rect" data-clipboard-text="{{ site.author.email|safe_email }}">
  <span class="button-text">Get in touch</span>
  <span class="clipboard-message">My E-Mail has been copied</span>
</button>
<button type="button" class="clipboard-button button-rect" data-clipboard-text="{{ site.author.email|safe_email }}">
  <span class="button-text">Here is your ID</span>
  <span class="clipboard-message">My ID has been copied</span>
</button>

Clipboard.js 循环按钮

Clipboard.js loop buttons

javascript

twig

clipboard.js