Zclip Open only clicked a class / copy from the following item
I realized how bad I am with JS / jQuery without using it for decades.
I am using jQuery Zclip to copy text from a list. But I found out that it only works with one element on the page at first. I found a solution using a different ID for each list item, but this will create a lot of unnecessary work in the future as there will be a ton of buttons.
I need a function that checks the span AFTER element behind the button element and retrieves the content from it, not a specific id. How can I achieve this via 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()
});
Hope you can understand my question.
source to share
You need to use a copy function 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 source code
o.bind('zClip_copy',settings.copy);
source to share
It looks like the parameter copy
could be a function. If it's called (and looks like this) in the context of the current button, the following code should work as you want:
$('button.copy').zclip({
path: 'scripts/ZeroClipboard.swf',
copy: function() {
return $(this).next('.server-ip').text();
}
});
source to share
Give your class li
(something like info
:
<li class="info">
<span class="server-name">SERVER NAME</span>
<button class="copy">COPY</button>
IP:<span class="server-ip">127.0.0.1</span>
</li>
And in your JS:
$(document).ready(function () {
// loop through all `.info` elements
$('.info').each(function () {
// get the button
var $button = $(this).find('.copy');
// get the ip element
var $ip = $(this).find('.server-ip');
// make button zclip
$button.zclip({
path: 'scripts/ZeroClipboard.swf',
// the text of ip
copy: $ip.text()
});
});
});
source to share