触发剪贴板.js父

Question

我在网站上使用Clipboard.js插件，并且.copy了单击时仅选择.copy按钮的父类的问题。

问题是我希望使用富文本格式复制pre标记内的代码，并且我使用的方法做得很好（ return document.querySelector("myClass") ），但是当我用一个代码更改前面的代码时我在类似的问题中发现了（ return $(trigger).closest(".fw-code-copy").next("code").text(); ），我可以复制每个块的代码，但失去格式，我的意思是代码被复制为纯文本。

您能否查看一下我拥有的代码并建议如何找到Button的父类？

HTML

<div class="code-snippet">
    <pre class="code">
     &lt;div&gt;
        some code
     &lt;/div&gt;
    </pre>
    <input class="copy" type="button" value="copy">
</div>

<div class="code-snippet">
    <pre class="code">
     &lt;div&gt;
        some other code
     &lt;/div&gt;
    </pre>
    <input class="copy" type="button" value="copy">
</div>

CSS

.code-snippet{
    position: relative;
    width: 100%;
    bordeR: 1px solid red;
    margin-bottom: 20px;
}
.copy{
    position: absolute;
    right: 20px;
    bottom: 20px;
}

JS

$(document).ready(function(){
    var clipboard = new Clipboard('.copy', {
        target: function() {
            return document.querySelector('.code');
        }
    });
});

Answer 1

您可以使用jQuery .closest()通过选择器从祖先获取第一个元素：

的jsfiddle

 $(document).ready(function(){ var clipboard = new Clipboard('.copy', { target: function(trigger) { return $(trigger).closest('.code-snippet').find('.code').get(0); } }); }); 

 .code-snippet { position: relative; width: 100%; border: 1px solid red; margin-bottom: 20px; } .copy { position: absolute; right: 20px; bottom: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.5/clipboard.min.js"></script> <div class="code-snippet"> <pre class="code"> &lt;div&gt; some code &lt;/div&gt; </pre> <input class="copy" type="button" value="copy"> </div> <div class="code-snippet"> <pre class="code"> &lt;div&gt; some other code &lt;/div&gt; </pre> <input class="copy" type="button" value="copy"> </div> 

Answer 2

我认为这应该有效。 您甚至不需要在目标函数中使用jQuery：

$(document).ready(function(){
    var clipboard = new Clipboard('.copy', {
        target: function(trigger) {
            return trigger.previousElementSibling;
        }
    });
});

片段：

 $(document).ready(function() { var clipboard = new Clipboard('.copy', { target: function(trigger) { return trigger.previousElementSibling; } }); }); 

 .code-snippet { position: relative; width: 100%; bordeR: 1px solid red; margin-bottom: 20px; } .copy { position: absolute; right: 20px; bottom: 20px; } .code { color: purple; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="code-snippet"> <pre class="code"> &lt;div&gt; some code &lt;/div&gt; </pre> <input class="copy" type="button" value="copy"> </div> <div class="code-snippet"> <pre class="code"> &lt;div&gt; some other code &lt;/div&gt; </pre> <input class="copy" type="button" value="copy"> </div>