0

そこで、各リソースの 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 %>

しかし、それに関する問題は、最初のリソースの URL のみをコピーしたことでした。だから私はこれを試しました：

<% @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 %>

運がなければ

4

2 に答える 2

1

内の投稿ごとに 1 つではなく 1 つだけを作成@postsし、DOM 内の各要素を で始まるクラスと一致させる方法を使用するために、反復の外にスクリプトを移動できます。clipboard-btn追加する必要はありません。次のような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>

于 2017-10-14T19:33:58.317 に答える