Question

我有这个观点，可以发表评论并回复它们。我想要一个按钮 - 回复 - 然后点击它打开下面的表格，添加评论文字和按钮发布。

这就是我的看法：

<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 ids，但问题是只有第一条注释会在页面加载时隐藏表单。所以我改为使用类（如我发布的代码）。现在，页面加载表单全部关闭。问题是当我点击评论上的按钮打开相应的表格时，所有评论都会打开。

我该如何解决？

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();
});

Rails dinamically将id分配给元素并在js函数中选择它们

1 个答案: