zclip:引用afterCopy回调中的发送者元素

Question

我在一个页面上有多个“复制代码”按钮。每个代码都有自己的按钮。

下面是我的基本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>");
    }
});

这是有效的，但是，我不能将消息注入到div class="msg"标记中。

如何定位var id，将其添加到div msg，并在单击按钮时将其显示在页面上。

Answer 1

不能从afterCopy访问在copy函数中创建的id变量的原因是，在函数内部定义的变量是scoped to that function。然而，这是很容易克服的。

在调用copy函数时，不需要将$(this).attr('id')中的值保存为全局变量，因为您可以通过使用相同的精确表达式轻松地获取afterCopy函数中调用元素的id：

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

这回答了您最初的问题，但是有一种更好的方法来确定要选择哪些元素。您可以将复制文本和复制消息元素的确切id以的形式存储在.copyme anchor上，而不是依赖于永远不变的ID字段并使用它来构造另一个元素的id：

<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事件。您可以使用this，而不必将ID存储在内存中。将选择器放在您想要发送消息的位置，并对其应用html，如下所示：

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

Working Demo in 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");
    }
});

Answer 2

您在一个函数中声明了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>");
    }
});