javascript - 如何使用ajax和jQuery在循环中渲染部分？

Question

我尝试使用ajax和jquery来渲染部分点击。请参阅Is it possible to render partial onclick without link_to?了解详情

它可以工作，部分已渲染，但无法正常工作。

我已将 link_to 放置在循环内，但是当单击“新评论”时，它会出现在第一篇文章中，而当我单击第二/第三/上的“新评论”时，它会出现在第一篇文章中。第四篇文章，所有部分都在第一篇文章中渲染。到底是怎么回事？

请参阅下面我的代码。

帖子/index.html.erb

<% @posts.each do |post| %>

   <%= post.title %>

   <%= post.content %>

   <%= link_to 'New Comment', new_comment_path, id: 'new_comment', remote: true %>

<% end %>

评论/new.js.erb

$('#new_comment').hide().after('<%= j render("form") %>')

_form.erb

<%= form_for(@comment) do |f| %>

  <div>
    <%= f.label :body %><br>
    <%= f.text_area :body %>
  </div>

  <div>
    <%= f.submit %>
  </div>

<% end %>

Answer 1

您对所有元素(帖子和新评论按钮)使用相同的 ID，因此当您单击新评论按钮时，所有部分都会在第一篇帖子上呈现。因为它是找到的第一个匹配元素。您应该为您的帖子使用不同的元素 ID，这样当单击“新评论”时，您将知道在哪里(我指的是哪个帖子)呈现表单。例如，您可以使用这样的计数器:

<%= link_to 'New Comment', new_comment_path, id: 'new_comment_' + i++, remote: true %>
那么您所要做的就是传递元素 id 并更改以下行: $('#'+PassedElementId).hide().after('<%= j render("form") %>')