javascript - 使用 JavaScript/Jquery 在 Ruby 中显示具有相同 id/class 的表单

Question

我想在我的网络应用程序中添加一个用于转发的按钮。当我按下按钮时，我希望显示一个表单，以便将我自己的文本添加到推文中。

 我实现了这个。但是我有一个问题:我的所有表单和按钮都包含相同的 id 和类，因此您可以想象，当我按下按钮时，它将显示具有该 id/类的第一个表单，而不是它必须显示的表单。我怎样才能展示我必须展示的表格？

  这里只是包含转发部分的代码部分(我认为其他部分对于问题并不重要，但如果有人需要我可以发布它们):

 <button type="buton" id="retweet-button">retweet</button>
      <%= form_for(current_user.tweets.build,url: retweet_act_path, method: :post, html: { multipart: true, :class => "retweet_form"  }) do |f| %>
      <%= f.hidden_field :original_tweet_id, value: tweet.id %>
      <%= f.text_area :content, placeholder: "Add a message to the tweet..." %> 
      <%= f.submit "Retweet"%>
      <% end %>

 和 JS:

 <script type="text/javascript">
 $(document).ready(function() {

 $('.retweet_form').hide(); //Initially form wil be hidden.

  $('#retweet-button').click(function() {
   $('.retweet_form').show();//Form shows on button click

   });
 });


</script>

  如何显示按下某个按钮时必须显示的表单？ (我想我必须为每个按钮和表单设置不同的 ID，但如何实现？)

Answer 1

据我从代码中了解到，每条推文使用一个按钮/表单对。这样，您就可以使用tweet ID 来生成表单ID。要将按钮连接到适当的表单，请使用 data-* 字段。

在 Rails 端生成表单和按钮(注意:语法高亮已损坏):

<button type="button" class="retweet-button" data-target-form-id="<%= "#retweet-form-#{tweet.id}" %>">retweet</button>
  <%= form_for(current_user.tweets.build,url: retweet_act_path, method: :post, html: { multipart: true, :class => "retweet_form", id: "retweet-form-#{tweet.id}" }) do |f| %>
  <%= f.hidden_field :original_tweet_id, value: tweet.id %>
  <%= f.text_area :content, placeholder: "Add a message to the tweet..." %> 
  <%= f.submit "Retweet"%>
  <% end %>

还有 JS:

$('.retweet_form').hide();
$('.retweet-button').click(function() {
  var formId = $(this).data('target-form-id');
  $(formId).show();
});