Question

我正按发件人显示邮件列表。

我还在每组消息后显示一个表单，以便我可以回复该特定的发件人。

<% @grouped_messages.each do |sender, messages| %>

 <% messages.each do |msg| %>
  <p><%= msg.content %></p>
 <% end %>

 <div class="reply-container", id='reply-container'>
 <%= form_for @message do |f| %>
  <%= f.text_field :content %>
  <%= f.submit "Reply" %>
 <% end %>
 </div>

 <%= link_to "Reply", '#', class: 'reply-link', id: 'reply-link' %>
<% end %>

我希望只有在点击“回复”链接时才能显示表单。

$(".reply-link").click(function(e){
 e.preventDefault();
 $('#reply-container').toggle();
 $('#reply-link').toggle();
});

这不起作用，因为页面上只能有一个id，并且所有回复容器都具有相同的ID。

如何在循环中动态生成元素时指定隐藏哪个容器？</ p>

Answer 1

你可以尝试类似的东西：

$(".reply-link").click(function(e){
  e.preventDefault();
  $(this).closest( '.reply-container').toggle();
  $(this).toggle();
});

你可以删除id：“reply-link”和“reply-container”

编辑：但你可以做得更好：

 <div class="reply-container", id="reply-sender-#{sender.id}-container">
 <%= form_for @message do |f| %>
  <%= f.text_field :content %>
  <%= f.submit "Reply" %>
 <% end %>
 </div>

 <%= link_to "Reply", '#', class: 'reply-link', id: "reply-sender-#{sender.id}" %>

然后它看起来像：

$(".reply-link").click(function(e){
  e.preventDefault();
  $("#" + $(this).attr("id") + "-container").toggle();
  $(this).toggle();
});

Answer 2

$(".reply-link").click(function(e){
  e.preventDefault();
  $(this).siblings('.reply-container').toggle();
  $(this).toggle();
});

编辑：

您还应该将组分成div：

<% @grouped_messages.each do |sender, messages| %>
 <div class='message_group'>

   <% messages.each do |msg| %>
    <p><%= msg.content %></p>
   <% end %>

   <div class="reply-container", id='reply-container'>
   <%= form_for @message do |f| %>
    <%= f.text_field :content %>
    <%= f.submit "Reply" %>
   <% end %>
   </div>

   <%= link_to "Reply", '#', class: 'reply-link', id: 'reply-link' %>
  </div>
<% end %>

如何在循环中生成元素时指定哪个容器？

2 个答案: