代码之家 › 专栏 › 技术社区 › joshmoto

clipboard.js通过多个按钮成功复制时更改按钮文本

clipboard.js jquery

0

joshmoto · 技术社区 · 7 年前

我是一个试图改变文字的人 clipboard.js 成功后说“复制”的按钮。

但问题是,我在同一个页面上有多个按钮,而且我正努力瞄准单击的按钮。我出错了 未捕获的类型错误:非法的构造函数

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

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/>

杰西德

把上面的代码看作是一把小提琴 https://jsfiddle.net/joshmoto/akh39dtc/

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

3 回复 | 直到 7 年前

1

Pheonix2105 7 年前

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/

我上面的代码应该有效。

很抱歉,我很忙,我将在最后一次更新答案,并解释原因。

2

1

Saurabh Yadav 7 年前

这是由于我使用箭头函数的作用域。ES6 arrow函数可以与this关键字绑定,因此它将在词法上向上扩展一个作用域,并在定义它的作用域中使用它的值。这对你有帮助吗

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

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

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

  clipboard.on('success', (e)=> {        // use arrow function
    $(this).text('Copied');
    setTimeout(()=> { // use arrow function

      $(this).text('Copy link')
    }, 2000);
  });

});

3

0

bit15 7 年前

    $(document).ready( function() {
        $(".copy-link").click(function(){
            $(this).html("copied");
        });
    });

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></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/>