Как настроить таргетинг только на одну кнопку для изменения текста при нажатии?

Я использую Clipboard.js для копирования текста на сайт, который я создаю. У меня все работает хорошо, но в случае, когда есть несколько кнопок, все кнопки срабатывают с текстовым сообщением об успешном копировании.

У меня это в нижнем колонтитуле:

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

<script type = "text/javascript">
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {

    $(".btn span").html("<strong>Copied!</strong> To Clipboard");                 
        });  
                </script>

В самой статье есть следующий код:

Example Text <button class = "btn" data-clipboard-text = "Example Text"> <span class = "button-text">Copy to Clipboard</span> </button>

Он отлично работает с одной кнопкой для копирования и вставки. После копирования текст кнопки изменится на «Скопировано! В буфер обмена». Однако, когда есть несколько кнопок и нажата одна из них, все они меняются на «Скопировано! В буфер обмена». Как настроить таргетинг только на кнопку, которую нажал пользователь?

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
1
0
366
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поведение, которое вы испытываете, вызвано очень расплывчатым (в вашей ситуации) селектором CSS для целевого текста кнопки, который нужно обновить. Это потому, что .btn span возвращает коллекцию всех кнопок с классом .btn и <span> для текста внутри.

Вы должны извлечь выгоду из данных, доступных в объекте события, возвращаемом буфером обмена. Вот пример структуры объекта события:

{
  "action": "copy",
  "text": "Example Text #1",
  "trigger": <button class = "btn" data-clipboard-text = "Example Text #1">…</button>,
  "clearSelection": function () { [native code] }
}

Я позволил себе обновить ваш фрагмент, чтобы использовать именно ту кнопку, которую вы нажимаете, со смещением фокуса на элемент ввода, который заполняется значением буфера обмена:

$(() => {
  const clipboard = new ClipboardJS('.btn');
  clipboard.on('success', e =>
    $(e.trigger)
    .html("<strong>Copied!</strong> To Clipboard")
    .parent()
    .find('input')
    .val(e.text)
    .focus());
});
label {
  display: block;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

<label>
  Example Text #1
  <button class = "btn" data-clipboard-text = "Example Text #1">
    <span class = "button-text">Copy to Clipboard</span>
  </button>
  <input placeholder = "Ctrl+V here..." />
</label>

<label>
  Example Text #2
  <button class = "btn" data-clipboard-text = "Example Text #2">
    <span class = "button-text">Copy to Clipboard</span>
  </button>
  <input placeholder = "Ctrl+V here..." />
</label>

Другие вопросы по теме