找不到$(this)对象's的父级在零剪贴板(v2.1.6)插件中

Not able to find $(this) object's parent in zeroClipboard (v2.1.6) plugin

本文关键字:剪贴板 v2 插件 对象 this 找不到      更新时间:2023-09-26

在@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)