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>

使用一个按钮即可完美地复制和粘贴。复制后，按钮的文本将更改为“已复制！到剪贴板”。但是，当有多个按钮并单击一个按钮时，它们都将更改为“已复制！到剪贴板”。如何仅定位用户单击的按钮？

Answer 1

您遇到的行为是由非常模糊的CSS选择器（在您的情况下）导致的，该CSS选择器将要更新的按钮文本作为目标。这是因为.btn span返回类别为.btn且内部文本为<span>的所有按钮的集合。

您应该受益于Clipboard返回的事件对象上的可用数据。这是事件对象结构的示例：

{
  "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>

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

1 个答案: