Ich versuche, den Text auf den Schaltflächen clipboard.js so zu ändern, dass bei Erfolg "kopiert" angezeigt wird.

Aber das Problem, das ich habe, ist, dass ich mehrere Schaltflächen auf derselben Seite habe und ich Probleme habe, auf die angeklickte Schaltfläche zu zielen. Ich erhalte die Fehlermeldung Nicht erfasster Typfehler: Unzulässiger Konstruktor

Ich würde gerne wissen, wie ich damit besser umgehen kann.

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

Siehe meinen Code oben als Geige https://jsfiddle.net/joshmoto/akh39dtc/

Jeder Rat wäre sehr dankbar, danke.

1
joshmoto 19 Jän. 2019 im 22:06

3 Antworten

Beste Antwort
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 ); 

Muss sein

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

Bearbeiten: Ich bin ein wenig verwirrt, ich habe die richtige Bibliothek, wenn Sie meinen

https://clipboardjs.com/

Mein obiger Code sollte funktionieren.

Es tut mir leid, dass ich ziemlich beschäftigt bin. Ich werde die Antwort ein letztes Mal mit einer Erklärung darüber aktualisieren, wie / warum.

1
Pheonix2105 19 Jän. 2019 im 19:35

Dies liegt an dem Umfang, in dem ich die Pfeilfunktion verwendet habe. ES6-Pfeilfunktionen können nicht an dieses Schlüsselwort gebunden werden, daher wird ein Bereich lexikalisch aufgerufen und der Wert davon in dem Bereich verwendet, in dem er definiert wurde. Möge dir das helfen

$('.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);
  });

});
1
Saurabh Yadav 19 Jän. 2019 im 19:28
    $(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/>
0
bit15 19 Jän. 2019 im 19:28