时间戳

首页 > 解决方案 > Clipboard.js 使用多个按钮在复制成功时更改按钮文本

jquery - Clipboard.js 使用多个按钮在复制成功时更改按钮文本

问题描述

我正在尝试将clipboard.js按钮上的文本更改为成功后说“已复制”。

但是我遇到的问题是我在同一页面上有多个按钮，并且我正在努力定位单击的按钮。我收到一个错误Uncaught TypeError: Illegal constructor

我很想知道如何更好地处理这个问题。

jQuery

$('.copy-link').on('click', function() {

  var copy_id = $(this).attr('id');

  var clipboard = new Clipboard( '#' + copy_id );

  clipboard.on('success', function(e) {
    $(this).text('Copied');
    setTimeout(function() {
      $(this).text('Copy link')
    }, 2000);
  });

});

HTML

<button id="copy_1" data-clipboard-text="Test 1" class="copy-link">Copy link</button><br/>
<button id="copy_2" data-clipboard-text="Test 2" class="copy-link">Copy link</button><br/>
<button id="copy_3" data-clipboard-text="Test 3" class="copy-link">Copy link</button><br/>
<button id="copy_4" data-clipboard-text="Test 4" class="copy-link">Copy link</button><br/>
<button id="copy_5" data-clipboard-text="Test 5" class="copy-link">Copy link</button><br/>

jsFiddle

将我上面的代码视为小提琴 https://jsfiddle.net/joshmoto/akh39dtc/

任何建议将不胜感激谢谢。

标签： jqueryclipboard.js

解决方案

let cb = new ClipboardJS('.copy-link');
$('.copy-link').on('click', function() {
  //get a reference to the JQUERY object of the current button
  let theButton = $(this);
  var copy_id = $(this).attr('id');

  var clipboard = new ClipboardJS( '#' + copy_id );

  clipboard.on('success', function(e) {
    //use the .text method of the Jquery object
    theButton.text('Copied');
    setTimeout(function() {
    //same again
      theButton.text(e.text);
    }, 2000);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="copy_1" data-clipboard-text="Test 1" class="copy-link">Copy link</button><br/>
<button id="copy_2" data-clipboard-text="Test 2" class="copy-link">Copy link</button><br/>
<button id="copy_3" data-clipboard-text="Test 3" class="copy-link">Copy link</button><br/>
<button id="copy_4" data-clipboard-text="Test 4" class="copy-link">Copy link</button><br/>
<button id="copy_5" data-clipboard-text="Test 5" class="copy-link">Copy link</button><br/>

var clipboard = new Clipboard( '#' + copy_id );

需要是

var clipboard = new ClipboardJS( '#' + copy_id );

编辑：我有点困惑我有正确的图书馆，如果你的意思是

https://clipboardjs.com/

我上面的代码应该可以工作。

对不起，我很忙，我将在最后一次更新答案，并解释如何/为什么。

推荐阅读