3

1 つのページに複数の「コードをコピー」ボタンがあります。各コードには独自のボタンがあります。

ここに私の基本的なhtmlがあります:

<a id="1" href="#" class="small-white-btn copyme">Copy Source</a>    
<div id="code-1" style="display:none;">html source code goes here</div>
<div class="msg1"></div>

<a id="2" href="#" class="small-white-btn copyme">Copy Source</a>   
<div id="code-2" style="display:none;">html source code goes here</div>
<div class="msg2"></div>

私のzclip jqueryは次のようになります:

$('.copyme').zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function () {
        var id = $(this).attr('id');
        var copythis = $('#code-' + id).text();
        return copythis;
    },
    afterCopy: function () {
        $("div.msg" + id).html("<p>Source Code Copied</p>");
    }
});

class="msg"これは機能しますが、メッセージを divタグに挿入できません。

var id をターゲットにして div メッセージに追加し、ボタンがクリックされたときにページに表示するにはどうすればよいですか。

4

2 に答える 2

3

関数内でid作成した変数にアクセスできない理由は、関数内で定義された変数がその関数にスコープされているためです。ただし、これは簡単に克服できます。copyafterCopy

$(this).attr('id')関数が呼び出されたときに値をグローバル変数として保存する必要はありません。同じ正確な式を使用して、関数copy内の呼び出し要素の ID を簡単に取得できるためです。afterCopy

afterCopy: function () {
    var id = $(this).attr('id');
}

これは元の質問に答えますが、選択する要素を決定するためのより良い方法があります。フィールドが変更されないことに依存し、IDそれを使用して別の要素の id を構築するのではなく、次のように、コピー テキストの正確な id を保存し、カスタム data-* 属性の形式でメッセージ要素をコピーできます.copyme anchor。

<a data-copy="#code-1" data-copy-msg="#msg1" class="copyme">Copy Source 1</a>

次に、copy関数でその属性を取得して jQuery セレクターに渡し、コピーするテキスト値を取得します。次のようにします。

copy: function () {
    var copySelector = $(this).data('copy');
    return $(copySelector).text();
}

afterCopy同じ方法でイベントを処理できます。thisID をメモリに保存する代わりに使用できます。メッセージを送りたいセレクターを取得し、次のように html を適用します。

afterCopy: function () {
    var copyMsgSelector = $(this).data('copy-msg');
    $(copyMsgSelector).html("Source Code Copied");
}

Fiddle での作業デモ

したがって、全体は次のようになります。

HTML :

<a data-copy="#code-1" data-copy-msg="#msg1"
   href="#" class="copyme" >Copy Source 1</a> 
<div id="code-1" style="display:none;">source code 1</div>
<span id="msg1"></span>

<br/>
<a data-copy="#code-2" data-copy-msg="#msg2"
   href="#" class="copyme" >Copy Source 2</a> 
<div id="code-2" style="display:none;">source code 2</div>
<span id="msg2"></span>

JavaScript :

$('.copyme').zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function () {
        var copySelector = $(this).data('copy');
        return $(copySelector).text();
    },
    afterCopy: function () {
        var copyMsgSelector = $(this).data('copy-msg');
        $(copyMsgSelector).html("Source Code Copied");
    }
});
于 2013-11-18T21:21:05.360 に答える
0

関数内で var id を宣言しているため、関数の実行が終了した後に破棄されるプライベート変数です。関数の外で変数を宣言する必要があります。その後、実行時に値を割り当てて保持できます。

これを試して：

var id;
$('.copyme').zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function () {
        id = $(this).attr('id');
        var copythis = $('#code-' + id).text();
        return copythis;
    },
    afterCopy: function () {

        $("div.msg" + id).html("<p>Source Code Copied</p>");
    }
});
于 2013-11-18T19:51:34.240 に答える