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>

​