3

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

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

这可行，但是，我无法将消息注入到 divclass="msg"标签中。

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

4

2 回答 2

3

您无法访问id您在copy函数中创建的变量的原因afterCopy是因为在函数内部定义的变量的范围仅限于该函数。然而，这很容易克服。

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

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

这回答了您最初的问题，但是有一种更好的方法来确定要选择的元素。与其依赖该ID字段永不更改并使用它来构造另一个元素的 id，您可以只存储复制文本的确切 id 并以自定义 data-* 属性的形式复制消息元素.copyme anchor，如下所示：

<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");
    }
});
于 2013-11-18T21:21:05.360 回答
0

您在函数中声明 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>");
    }
});
于 2013-11-18T19:51:34.240 回答