Ruby on Rails的剪貼板護欄動態URL複製問題

Question

，所以我想每個資源的URL複製到剪貼板，所以我嘗試：

<% @posts.each do |post|%> 
<script> 
$(document).ready(function(){ 

    var clipboard = new Clipboard('.clipboard-btn'); 
    console.log(clipboard); 

}); 
</script> 
<textarea id="bar"><%= post_path(post)%></textarea> 

<button class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#bar"> 
    Copy to clipboard 
</button> 
<% end %> 

但隨着這個問題是它只是複製的網址第一資源。所以，我想這一點：

<% @posts.each do |post|%> 
<script> 
$(document).ready(function(){ 

    var clipboard = new Clipboard('.clipboard-btn<%=post.id%>'); 
    console.log(clipboard); 

}); 
</script> 
<textarea id="bar<%=post.id%>"><%= post_path(post)%></textarea> 

<button class="clipboard-btn<%=post.id%>" data-clipboard-action="copy" data-clipboard-target="#bar<%=post.id%>"> 
    Copy to clipboard 
</button> 
<% end %> 

沒有任何的運氣

Answer 1

您可以將您的腳本迭代之外，以創建只有一個，而不是一個對每個帖子裏面@posts的，並且使用方式在帶班開始clipboard-btn DOM中的每個元素匹配，所以你不需要添加ID，如：

<% @posts.each do |post|%> 
    <textarea id="bar<%= post.id %>"> 
    <%= post_path(post) %> 
    </textarea> 

    <button 
    class="clipboard-btn<%= post.id %>" 
    data-clipboard-action="copy" 
    data-clipboard-target="#bar<%= post.id %>"> 
    Copy to clipboard 
    </button> 
<% end %> 

<script> 
    $(document).ready(function(){ 
    var clipboard = new Clipboard('[class^="clipboard-btn"]'); 
    }); 
</script> 

作爲例子：

$(document).ready(function() { 
 
    var clipboard = new Clipboard('[class^="clipboard-btn"]'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script> 
 

 
<textarea id="bar1">Some content 1</textarea> 
 
<button class="clipboard-btn1" data-clipboard-action="copy" data-clipboard-target="#bar1"> 
 
    Copy to clipboard 
 
</button> 
 
<br> 
 
<textarea id="bar2">Some content 2</textarea> 
 
<button class="clipboard-btn2" data-clipboard-action="copy" data-clipboard-target="#bar2"> 
 
    Copy to clipboard 
 
</button> 
 
<br> 
 
<textarea id="bar3">Some content 3</textarea> 
 
<button class="clipboard-btn3" data-clipboard-action="copy" data-clipboard-target="#bar3"> 
 
    Copy to clipboard 
 
</button> 
 
<br>

Answer 2

您不能一次複製多個目標元素。

new Clipboard('.clipboard-btn', { 
    text: function(trigger) { 
     var a = document.querySelector('#a').value; 
     var b = document.querySelector('#b').value; 
     return a + b; 
    } 
});