Working Demo in Fiddle

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

您无法从id访问copy函数中创建的afterCopy变量的原因是因为函数内部定义的变量为scoped to that function。但是，这很容易过度使用。

调用$(this).attr('id')函数时，无需将copy的值保存为全局变量，因为您可以轻松获取{{1}中调用元素的id通过使用相同的精确表达式来实现函数：即

afterCopy

这回答了您的原始问题，但有更好的方法来确定要选择的元素。您可以只存储复制文本的确切ID并以custom data-* attributes的形式复制邮件元素，而不是依赖afterCopy: function () { var id = $(this).attr('id'); }字段永远不会更改并使用它来构建另一个元素的ID您的ID .copyme，如下所示：

anchor

然后，在<a data-copy="#code-1" data-copy-msg="#msg1" class="copyme">Copy Source 1</a>函数中，您可以获取该属性并将其传递到jQuery选择器以获取要复制的文本值，如下所示：

copy

您可以采用相同的方式处理copy: function () { var copySelector = $(this).data('copy'); return $(copySelector).text(); }事件。您可以使用afterCopy而不必将ID存储在内存中。抓住选择器的位置，然后将html应用于此，如下所示：

this

Working Demo in Fiddle

所以整件事情看起来像这样：

<强> HTML ：

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

<强>的JavaScript ：

<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>

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

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

2 个答案:

Working Demo in Fiddle