我在网站上使用 Clipboard.js
插件,但遇到了单击时仅选择 .copy
按钮的父类的问题。
问题是我希望以富文本格式复制 pre
标记内的代码,而我使用的方法做得很好(return document.querySelector("myClass")
),但是当我用类似问题中发现的代码更改前面的代码时(return $(trigger).closest(".fw-code-copy").next("code").text();
)我可以复制每个 block 的代码,但会丢失格式,我的意思是代码被复制为纯文本。
您能否查看我的代码并建议如何查找按钮父级的类?
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
.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');
}
});
});
最佳答案
您可以使用 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>
关于javascript - 触发剪贴板.js 父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35102429/