javascript-zclip：在afterCopy回调中引用sender元素

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

这是我的基本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访问在复制函数中创建的id变量的原因是,在函数内部定义的变量为scoped to that function.但是,这很容易克服.

调用copy函数时,无需将$(this).attr(‘id’)中的值另存为全局变量,因为您可以通过使用afterCopy函数轻松获得调用元素的id.相同的精确表达式：即

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

这回答了您的原始问题,但是有一种更好的方法来确定选择哪些元素.您不必依赖ID字段就永远不会改变并使用它来构造另一个元素的ID,您只需在.copyme锚点上以custom data-* 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事件.您可以使用它,而不必将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");
    }
});

标签：zclip,javascript,jquery
来源： https://codeday.me/bug/20191122/2060094.html