javascript - rails 5 : Trying to render divs with a single partial but keep the div class unique so that JQuery doesn't fire on all partials

Question

标题有点令人困惑。

我正在尝试实现一些类似 reddit 的评论系统。这样您就可以查看 Post 并向其添加多态的 Comment 。或者，评论另一条评论。

我的观点是这样的:

<h2>Post:</h2>
<div class="well">
  <p>
    <strong>Title:</strong>
    <%= @post.title %>
  </p>
<% if @post.description %>
  <p>
    <strong>Description:</strong>
    <%= @post.description %>
  </p>
<% end %>
</div>

<% if current_user %>
  <%= render "shared/comment_form" %>
<% else %>
  <p>Log in to add comments</p>
<% end %>

<% if @post.comments.any? %>
  <%= render "shared/comment_list" %> # Another comment_form inside of this partial
<% else %>
  <p>No comments yet</p>
<% end %>

comment_list 内部是 comment_form 的另一个呈现，以便您可以对评论进行评论:

<h2>Comments</h2>
<ul>
  <% @post.comments.each do |co| %>
    <li><%= co.body %></li>
    <%= render "shared/comment_form" if current_user %>
  <% end %>
</ul>

最后，我的评论表单本身:

<div id="comment-form" class="form-group">
  <%= form_for @comment, remote: true, url: post_comments_path(@post) do |f| %>
    <%= f.text_area :body, required: true, rows: 5, class: "form-control" %>
    <%= f.hidden_field :commentable_id, :value => @post.id %>
    <%= f.hidden_field :commentable_type, :value => @post.class.name %>
    <%= f.hidden_field :user_id, :value => current_user.id %>
    <br>
    <%= f.submit class: "btn btn-primary" %>
  <% end %>
</div>
<span id="add-comment">Add a comment</span>

以及作用于 comment_form 的 Jquery 代码:

$(document).on('turbolinks:load', function() {
  $("#comment-form").hide();
  $('#add-comment').click( function() {
    $("#comment-form").fadeToggle("fast");
    ($("#add-comment").text() === "Cancel") ? $("#add-comment").text("Add comment") : $("#add-comment").text("Hide");
  });
});

我的问题是:

如何分离这些 div，以便 Jquery 不会在 id="comment-form 的所有实例上触发？我想传递一个 erb 标记，例如 <%= @post。 class.name %><%= @post.id %>，但再次强调，保持变量通用。那么，我如何在 JQuery 代码中实现该唯一的 id 名称。

编辑:我的问题的一部分得到了解决。我把剩下的我没能做的留给大家看。

Answer 1

您可以像这样使用 prev():

$(document).ready(function() {
    $('.comment-form').hide();

    $('.add-comment').click( function(event) {
    // Store the button which has just been clicked on a variable
    var eventTarget = $(event.target);

    // Find the previous element with the #comment-form and id and toggle it
    eventTarget.prev('.comment-form').fadeToggle('fast');

    // Use the eventTarget Again
    (eventTarget.text() === 'Cancel') ? eventTarget.text('Add comment') : eventTarget.text('Cancel');
  });
});

您可以在此处查看此操作:http://codepen.io/rebagliatte/pen/MbKNJv