觸發器clipboard.js父

Question

我正在使用Clipboard.js插件的網站，並堅持選擇只有父類的.copy按鈕點擊。

的問題是，我想裏面pre標籤的代碼與豐富文本格式和我使用的是否良好（return document.querySelector("myClass")）的方法進行復制的，但是當我改變與一個我在發現前面的代碼類似的問題（return $(trigger).closest(".fw-code-copy").next("code").text();）我可以複製每個塊的代碼，但丟失格式，我的意思是代碼被複製爲純文本。

請您複查一下我的代碼，並建議如何找到按鈕父級的類？

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>