zclip: ссылка на элемент отправителя в обратном вызове afterCopy

Question

У меня есть несколько кнопок "копировать код" на одной странице. У каждого кода есть своя кнопка.

вот мой основной 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>");
    }
});

Это работает, однако я не могу вставить сообщение в div class="msg" тег.

Как я могу настроить таргетинг на var id, добавить его в div msg и отобразить на странице при нажатии кнопки.

Answer 1

Причина, по которой вы не можете получить доступ к id переменная, которую вы создали в copy функция от afterCopy потому что переменные, определенные внутри функции, ограничены этой функцией. Однако это легко преодолевается.

Нет необходимости сохранять значение из $(this).attr('id') в качестве глобальной переменной, когда copy функция вызывается, потому что вы можете так же легко получить идентификатор вызывающего элемента в afterCopy функция с использованием того же точного выражения: т.е.

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

Это отвечает на ваш первоначальный вопрос, но есть гораздо лучший способ определить, какие элементы выбрать. Вместо того чтобы полагаться на ID поле, чтобы никогда не изменяться и используя его для создания идентификатора другого элемента, вы можете просто сохранить точный идентификатор вашего текста копии и скопировать элементы сообщения в виде пользовательских атрибутов data-* на вашем .copymeanchor, как это:

<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 вместо того, чтобы хранить идентификатор в памяти. Возьмите селектор, куда вы хотите, чтобы сообщение отправлялось, и примените к нему html, например так:

afterCopy: function () {
    var copyMsgSelector = $(this).data('copy-msg');
    $(copyMsgSelector).html("Source Code Copied");
}

---

Рабочая демонстрация в скрипке

---

Так что все это будет выглядеть так:

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

Answer 2

Вы объявляете 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>");
    }
});