Rails 为元素动态分配 id 并在 js 函数中选择它们

Question

我有这个观点，可以在哪里发布 cmets 并回复他们。我想要一个按钮 - 回复 - 并通过单击它打开下面的表单以添加评论文本和按钮来发布。

这是我的看法：

<ul>
  <div class="comment">


  <strong><%= comment.user.name %></strong> - <%= comment.body %> <br>
  <small>Submitted <%= time_ago_in_words(comment.created_at) %> ago
<button class="comment">Reply</button>
<% if comment.user_id == current_user.id %>
<%= link_to 'Edit', edit_comment_path(comment), class: 'btn btn-default btn-sm' %>
<% end %>
</div>


<div class="comment-form">
  <%= semantic_form_for [comment, Comment.new] do |f| %>
      <%= f.text_area :body, placeholder: "Add a Reply", rows: 1, required: true, class: 'form-control' %><br/>
      <%= f.submit "Post", class: 'btn btn-primary btn-sm'  %>

      <% end %>
</div>


        <%= render partial: 'comments/comment', collection: comment.comments %>


</ul>

这是 application.js

$(document).ready(function() {

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

 $('.comment').click(function() {
  $('.comment-form').show();//Form shows on button click

  });
});

首先我尝试使用 div id，但问题是只有第一条评论在页面加载时隐藏了表单。所以我改为使用类（如我发布的代码中所示）。现在页面加载表单都已关闭。问题是当我单击评论上的按钮以打开相应的表单时，所有 cmets 中的所有表单都打开。

我该如何解决？

Answer 1

您可以同时使用 id 和类。

最初使用该类关闭它们，但添加 id 如下代码：

<button class="comment" data-comment-id="comment_<%=comment.id%>">Reply</button>

然后有这样的评论表单

<div class="comment-form" id="comment_<%=comment.id%>">

你的 javascript 代码将变成：

$('.comment').click(function() {
  var comment_id = "#" + $(this).attr('data-comment-id');
  $(comment_id).show();
});