只有最后一篇文章的评论显示在弹出(Ruby on Rails)

Question

我在每篇文章下面都有评论。所有的帖子和评论都可以通过链接/users/username

看到。

我使用facebox(基于jquery的lightbox)的弹出框和评论显示得很好。唯一的问题是，只有最新的帖子的评论显示在弹出窗口。所有的弹出式链接都显示相同的注释。

例如，如果最新的帖子有5条评论，我可以点击帖子下面的评论链接，在弹出框中查看。然而，当我向下滚动到另一个只有一条评论的帖子时，当我点击评论链接时，我看到了同样的5条评论。如何确保只显示与特定帖子相关的评论?

这是我的show.html.erb

<script src="/jquery.js" type="text/javascript"></script>
<link href="/src/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/src/facebox.js" type="text/javascript"></script> 
<script language="javascript">
 jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox() 
}) 
</script>
<% provide(:title, @user.name) %>
<div class="row">
  <aside class="span4">
    <section>
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
    <section>
      <%= render 'shared/stats' %>
     </section>
  <br>
  </aside>
 <br>
  <div class="span10">
    <%= render 'follow_form' if signed_in? %>
    <% if @user.microposts.any? %>
      <h3>Browse</h3>
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
    <% end %>
  </div>
  </div>

My micropost.html.erb，其中评论视图位于底部

<li>
 <%= render 'shared/comment_form', micropost: micropost if signed_in?%>
 <div id ="modal" class = "comments">
  <% micropost.comments.each do |comment| %>
  <%= image_tag("http://www.gravatar.com/avatar.php?gravatar_id=#{Digest::MD5::hexdigest(comment.user.email)}", :alt => 'Avatar', :class => 'avatar', :height => "10%", :width => "10%") %> <!-- Retrieves Gravatar -->
    <%= link_to comment.user.name, comment.user %>
          <span class="timestamp"><%= time_ago_in_words(comment.created_at) %> ago</span>
    <span class="content2"><%= comment.comment_content %></span>
    <% end %></div>
</li>

最后是comment_form.html.erb

<%= form_for([micropost, @comment]) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.text_field :comment_content %>
  </div>
  <div class="ItemContainer">
<div class="ItemInput">
    <button class="btn" type="submit">
    Comment
  </button>
  </div><div class="ItemCommentCount">
<% end %>
<%= link_to "#modal", :rel => "facebox-#{micropost.id}" do %>
  Comments
<% end %></div></div> 

Answer 1

From fine specification:

id = id

元素的唯一标识符。

一个文档中不能有多个元素具有相同的id值。

您有多个<div id="modal">元素:

<div id ="modal" class = "comments">

在您的页面。由于id应该是唯一的，所以对id的DOM搜索通常只会找到第一个;你总是得到第一个微博的评论，这与你有重复的id时的预期行为相匹配。

一个简单的解决方案是将micropost.id包含在DOM id s:

<div id="modal-<%= micropost.id %>" class="comments">

，然后在链接中:

<%= link_to "#modal-#{micropost.id}", :rel => "facebox-#{micropost.id}" do %>
  Comments
<% end %>