如何只定位一个按钮以在单击时更改文本？

Question

我正在使用 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>

完美的一键复制粘贴。一旦复制按钮的文本更改为 "Copied! To Clipboard." 但是，当有多个按钮并单击一个按钮时，它们都会更改为 "Copied! To Clipboard." 如何仅定位用户单击的按钮？

Answer 1

您遇到的行为是由一个非常模糊的（在您的情况下）CSS 选择器导致的，目标按钮文本要更新。这是因为 .btn span returns 所有带有 class .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>

如何只定位一个按钮以在单击时更改文本？

How Do I Target Only One Button To Change Text When Clicked?

clipboard

jquery

button

clipboard.js