zclip:引用afterCopy回调中的sender元素

zclip: refer to sender element in afterCopy callback

本文关键字：sender 元素 回调 引用 afterCopy zclip      更新时间：2023-09-26

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

这是我的基本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中，并在单击按钮时将其显示在页面上。

无法从afterCopy访问在copy函数中创建的id变量的原因是，函数内部定义的变量的作用域是该函数。然而，这很容易过度燃烧。

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

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

这回答了您最初的问题，但有一种更好的方法来确定要选择哪些元素。与其依赖ID字段永远不会更改并使用它来构造另一个元素的id，您只需在.copyme anchor上以自定义数据-*attributes的形式存储复制文本和复制消息元素的确切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");
}

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

您在函数中声明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>");
    }
});
相关文章：