在@LanderVanBreda的帮助下得到了答案
zeroClipboard.on('copy', function (event) {
var highlight = $(event.target).parent().nextAll('.highlight').first()
event.clipboardData.setData("text/plain", highlight.text())
});
问题是:
代码几乎可以工作,但在最后阶段将文本复制到剪贴板时被卡住了。
有$(this)
对象,但它不工作。我只想让下面的代码行正常工作。
zeroClipboard.on('copy', function (event) {
$(this).parent().addClass('someClass');
});
这是实际的HTML:
<div class="tab-content">
<div class="tab-pane active">
<div class="highlight mb-0">
<pre><code>Some vpaid code </code></pre>
</div>
<div class="tab-pane">
<div class="highlight mb-0">
<pre><code>Some mraid code</code></pre>
</div>
</div>
以下是浏览器如何使用零剪贴板输出HTML
<div class="tab-content">
<div class="tab-pane active">
<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>
<div class="highlight mb-0">
<pre><code>Some VPAID code </code></pre>
</div>
<div class="tab-pane">
<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>
<div class="highlight mb-0">
<pre><code>Some MRAID code</code></pre>
</div>
</div>
这是JavaScript:
// Config ZeroClipboard
ZeroClipboard.config({
hoverClass: 'btn-clipboard-hover'
})
// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>'
$(this).before(btnHtml)
});
var zeroClipboard = new ZeroClipboard($('.btn-clipboard'));
var htmlBridge = $('#global-zeroclipboard-html-bridge');
// Handlers for ZeroClipboard
zeroClipboard.on('ready', function (event) {
htmlBridge
.data('placement', 'top')
.attr('title', 'Copy to clipboard')
.tooltip();
// Copy to clipboard
zeroClipboard.on('copy', function (event) {
var highlight = $(this).parent().nextAll('.highlight').first()
event.setData(highlight.text())
});
// Notify copy success and reset tooltip title
zeroClipboard.on('aftercopy', function () {
htmlBridge
.attr('title', 'Copied!')
.tooltip('fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('fixTitle')
});
});
// Notify copy failure
zeroClipboard.on('error', function () {
ZeroClipboard.destroy();
htmlBridge
.attr('title', 'Flash required')
.tooltip('fixTitle')
.tooltip('show');
});
将其作为答案发布:
因为this在事件中使用,我们永远不知道"this"指的是什么。我总是害怕"this"。
因此可通过以下方式解决:
$(event.target)
代替
$(this)