Search code examples
javascriptjquerybuttoncopyzclip

Zclip Open only clicked class/copy from next element


I've realized how bad i'm at JS/jQuery not having used it for decades.

I'm using jQuery Zclip to copy text from a list. But I found out that it first only works on one element per page. I found a solution using a different ID for every list item, but this will create a lot of unnecessary work in the future since there will be a ton of buttons.

What I need is a function that checks the span element AFTER the button element and take the content from that, rather from a specific ID. How can I achieve this through jquery?

Here's my HTML/JS

<li><span class="server-name">SERVER NAME</span>
    <br><button class="copy">COPY</button>IP:<span class="server-ip">127.0.0.1</span>
</li>

jquery

$(document).ready(function () {
    $('button.copy').zclip({
        path: 'scripts/ZeroClipboard.swf',
        copy: $('span.description').text()
  });

I hope you understand my question.


Solution

  • You need to use function with copy like

    $('button.copy').zclip({
        path: 'scripts/ZeroClipboard.swf',
        copy: function() {
            return $(this).next('.server-ip').text(); //this here refers to element which invoked zclip
        }
    });
    

    You can go through source code

    o.bind('zClip_copy',settings.copy);