Question

我想抓住＆lt;的内容。 p>在链接之前：

<p class="copiedText">aaa</p>
<a class="copy-btn" href="#">a copy button</a><br /><br />

<p class="copiedText">ccc</p>
<a class="copy-btn" href="#">a copy button</a><br /><br />

并使用zClip将其复制到剪贴板。

我使用此JQuery代码段为单个链接工作：

$(document).ready(function(){
    $('a.copy-btn').zclip({     
        path:'js/ZeroClipboard.swf',
        copy:$('p.copiedText').text(),
    });
});

但是当有多个按钮/链接时，所有<p>的内容都会立即被复制。我正在尝试实现.prev()运算符：

copy:$('p').prev('.copiedText').text()

但无济于事。我以很多不同的方式实现了prev（），但没有结果。

我是否误解了以前的工作原理？或者我只是拙劣的实施？

（我会链接到它的jsfiddle，但点击复制功能不起作用）

[编辑：ID's to class's，woops']

Answer 1

首先，每个文档的ID应该是唯一的。将ID替换为类，然后选择.copiedText而不是#copiedText

您要做的第二件事是将点击处理程序附加到所有.copy-btn：

$(".copy-btn").click(function(){
    $(this).zclip({     
        path:'js/ZeroClipboard.swf',
        copy:$(this).prev('p.copiedText').text(),
    }); 
})

Heres编辑HTML：

<p class="copiedText">aaa</p>
<a class="copy-btn" href="#">a copy button</a><br /><br />

<p class="copiedText">ccc</p>
<a class="copy-btn" href="#">a copy button</a><br /><br />

REPLY：

.click是一个事件，.zclip是一种方法。您应该在事件处理程序中实现方法调用：

$(".copy-btn").click(function(){
    $(this).zclip({     
        path:'js/ZeroClipboard.swf',
        copy:$(this).prev('p.copiedText').text(),
    });
});

Answer 2

看起来你正在创建重复的id尝试使用类来代替。 ID必须在页面上是唯一的。

Answer 3

这是你要找的吗？

$('.copy-btn').click(function(){
    some_text = $(this).prev('p').text();
    console.log(some_text);
});

jsfiddle示例：http://jsfiddle.net/bradleygriffith/KhuAS/

Answer 4

查看他们的文档，有一个复制功能的回调。这是您应该用来获取动态复制值的内容：

$(".copy-btn").zclip({
    path: 'js/ZeroClipboard.swf',
    copy: function(){
        // `this` should be the current a.copy-btn
        return $(this).prev('p.copiedText').text();
    }
});

Dimitri的答案可能无法正常工作，因为zclip会绑定目标上的事件。因此，在事件回调中绑定其他事件将a）在第一次单击时不起作用，并且b）可能多次绑定。对于该方法，请使用each而不是click。

使用JQuery的.prev（）在单击链接后获取<p>的内容</p>

4 个答案: