[英]Trigger clipboard.js parent
I am using the Clipboard.js
plugin a website, and stuck with the issue selecting only parent class of the .copy
button on-click. 我在网站上使用
Clipboard.js
插件,并且.copy
了单击时仅选择.copy
按钮的父类的问题。
The problem is that I want the code inside pre
tag to be copied with rich text formatting and the method I am using does it well ( return document.querySelector("myClass")
), however when I am changing the preceding code with the one I found in a similar question ( return $(trigger).closest(".fw-code-copy").next("code").text();
) I can copy each block's code but loosing formatting, I mean the code is being copied as plain text. 问题是我希望使用富文本格式复制
pre
标记内的代码,并且我使用的方法做得很好( return document.querySelector("myClass")
),但是当我用一个代码更改前面的代码时我在类似的问题中发现了( return $(trigger).closest(".fw-code-copy").next("code").text();
),我可以复制每个块的代码,但失去格式,我的意思是代码被复制为纯文本。
Could you please review the code I have and advise how to find the class of button's parent? 您能否查看一下我拥有的代码并建议如何找到Button的父类?
HTML HTML
<div class="code-snippet">
<pre class="code">
<div>
some code
</div>
</pre>
<input class="copy" type="button" value="copy">
</div>
<div class="code-snippet">
<pre class="code">
<div>
some other code
</div>
</pre>
<input class="copy" type="button" value="copy">
</div>
CSS CSS
.code-snippet{
position: relative;
width: 100%;
bordeR: 1px solid red;
margin-bottom: 20px;
}
.copy{
position: absolute;
right: 20px;
bottom: 20px;
}
JS JS
$(document).ready(function(){
var clipboard = new Clipboard('.copy', {
target: function() {
return document.querySelector('.code');
}
});
});
You could use jQuery .closest()
to get first element from ancestors by selector: 您可以使用jQuery
.closest()
通过选择器从祖先获取第一个元素:
$(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"> <div> some code </div> </pre> <input class="copy" type="button" value="copy"> </div> <div class="code-snippet"> <pre class="code"> <div> some other code </div> </pre> <input class="copy" type="button" value="copy"> </div>
I think this should work. 我认为这应该有效。 You don't even need jQuery in the target function:
您甚至不需要在目标函数中使用jQuery:
$(document).ready(function(){
var clipboard = new Clipboard('.copy', {
target: function(trigger) {
return trigger.previousElementSibling;
}
});
});
Snippet: 片段:
$(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"> <div> some code </div> </pre> <input class="copy" type="button" value="copy"> </div> <div class="code-snippet"> <pre class="code"> <div> some other code </div> </pre> <input class="copy" type="button" value="copy"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.