Кнопки петли Clipboard.js - PullRequest
Новая
       34

Кнопки петли Clipboard.js

0 голосов
/ 13 октября 2018

Я использую 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, так что наберитесь терпения, пожалуйста.:)

1 Ответ

0 голосов
/ 13 октября 2018

На что вы должны обратить внимание, так это на получение извлеченного элемента 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>
...