4

クリックした後、.fw-code-copy-button最も近いコンテナからソースコードをコピーしたいと思います。 .fw-code-copy-button-s は、ユーザーが専用の「ソースを表示」ボタンをクリックした後、動的に作成されます。

ボタンの例の HTML:

<span class="fw-code-copy">
  <span class="fw-code-copy-button" data-clipboard-text="...">copy</span>
</span>

これは、クリックイベントをトリガーし、クリップボードにコピーするソースコードを定義する方法です:

$(document).on("click", ".fw-code-copy-button", function(){
  var source = $(this).closest(".fw-code-copy").next("code").text();
});

そして、これがclipboard.jsがコピーイベントをトリガーする方法です

new Clipboard(".fw-code-copy-button", {
  text: function(trigger) {
    return source; // source should somehow be copied from scope above it
  }
});

Web サイトのどこかをクリックすると、次のエラーが表示されます。

Uncaught Error: Missing required attributes, use either "target" or "text"

しかし、まず、コピーするテキストを定義したくありません。data-clipboard-text="..." 次に、値としてdata-clipboard-text定義され"..."ています。

誰かが少しでもお金を払ってくれたら、私はとても感謝しています。

[編集]デモンストレーション用に jsFiddle を作成したところ、驚くべきことに UncaughtError が消えましたが、sourceコードを onClick から Clipboard スコープに移動する必要があります。

https://jsfiddle.net/2rjbtg0c/1/

4

2 に答える 2

8

元のコードによると：

 new Clipboard(".fw-code-copy-button", {
  text: function(trigger) {
    return $(trigger).closest(".fw-code-copy").next("code").text(); 
  }
});
于 2015-11-17T13:41:32.623 に答える
6

トリガーは、クリックしたボタンです。親を取得してから、コード ブロック内のテキストを返します。また、前後の空白を削除する必要があります。

デモ

これは、含まれている例のように、コード ブロック内のテキストを取得します

new Clipboard(".fw-code-copy-button", {
  text: function(trigger) {
    return $(trigger).parent().find('code').first().text().trim();
  }
});
.fw-code-copy {
  display: block;
  position: relative;
  width: 400px;
  height: 30px;
  background: #FFE;
  border: thin solid #FF0;
  margin-bottom: 0.5em;
  padding: 0.5em;
}
.fw-code-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0.25em;
  border: thin solid #777;
  background: #800080;
  color: #FFF;
}
.fw-code-copy-button:hover {
  border: thin solid #DDD;
  background: #992699;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>

<span class="fw-code-copy">
  <span class="fw-code-copy-button">Copy</span>
  <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-1.css&quot;&gt;</code>
</span>
<span class="fw-code-copy">
  <span class="fw-code-copy-button">Copy</span>
  <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-2.css&quot;&gt;</code>
</span>
<span class="fw-code-copy">
  <span class="fw-code-copy-button">Copy</span>
  <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-3.css&quot;&gt;</code>
</span>

于 2015-11-17T13:34:14.337 に答える