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>

html源代码在这里
html源代码在这里

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

$（'.copyme'）.zclip({
路径：'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
复制：函数（）{
var id=$（this.attr（'id'）；
var copythis=$（'#代码-'+id）.text（）；
返回此副本；
},
后拷贝：函数（）{
$（“div.msg”+id.html（“复制的源代码”）；
}
});

这是可行的，但是，我无法将消息注入div

class=“msg”

标记

---

如何将var id作为目标，将其添加到div msg中，并在单击按钮时显示在页面上。

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

var-id；
$（'.copyme'）.zclip({
路径：'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
复制：函数（）{
id=$（this.attr（'id'）；
var copythis=$（'#代码-'+id）.text（）；
返回此副本；
},
后拷贝：函数（）{
$（“div.msg”+id.html（“复制的源代码”）；
}
});

您无法从

afterCopy

访问在

copy

函数中创建的

id

变量的原因是函数内部定义的变量是无效的。然而，这是很容易克服的

调用

copy

函数时，无需将

$（this）.attr（'id'）

中的值保存为全局变量，因为您可以通过使用相同的精确表达式在

afterCopy

函数中轻松获取调用元素的id:

afterCopy:函数（）{
var id=$（this.attr（'id'）；
}

这回答了您最初的问题，但是有一种更好的方法来确定要选择哪些元素。您不必依赖

ID

字段来永不更改并使用它来构造另一个元素的ID，只需将复制文本的确切ID存储在

.copyme

锚定

中，如下所示：

$('.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>");
    }
});

所以整个事情看起来是这样的：

$('.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>");
    }
});

HTML：


源代码1


源代码2

JavaScript：

$（'.copyme'）.zclip({
路径：'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
复制：函数（）{
var copySelector=$（this.data（'copy'）；
返回$（copySelector）.text（）；
},
后拷贝：函数（）{
var copyMsgSelector=$（this）.data（'copy-msg'）；
$（copyMsgSelector.html（“复制的源代码”）；
}
});
您是否尝试使用var id=$（this.attr（'id'）；（与在复制函数中相同）使用全局变量（varid；）会使代码变得非常混乱：如果您的程序员同事也为类似的需求定义了全局varid，该怎么办？您将得到一个竞争条件，系统的不同部分将随机覆盖其值-因此您的CopyFinished将读取由其他人设置的值。请使用afterCopy:function（）{var id=$（this）.attr（'id'）；}或数据属性表单@KyleMit的答案+1，因为这不是一个错误的答案。这里没有必要否决任何东西。如果另一个开发人员出现并且绝对需要
id
，那么您可以将其重命名为特定的名称，如
copiedItemId
。这不应该引起任何冲突。因为我们可以不用它，我认为这样更好，但这至少回答了OP的问题！（虽然存储复制消息选择器似乎有点过分，但这是一个特殊的需要）谢谢，虽然冗长的意思，我不确定你的意思是什么。其次，我认为存储选择器一点也不过分。怎么杀得过火？你不会受到任何性能的影响。您希望标记在语义上尽可能清晰。由于我们的
a
标记直接与另一个
div
和
span
通信，因此最好的情况是我们的锚自身指定哪些锚。构造id标签会限制您的命名选择，并且很容易被破坏。