Question

我在每个帖子下都有评论。所有帖子和评论都可以通过链接/用户/用户名

看到

我正在使用facebox（基于jQuery的灯箱）弹出窗口，评论显示得很好。唯一的问题是弹出窗口中只显示最新帖子的评论。显示所有弹出链接的相同注释。

例如，如果最新帖子有5条评论，我可以点击帖子下面的评论链接，在弹出窗口中查看。但是，当我向下滚动并转到带有1条评论的其他帖子时，当我点击评论链接时，我会看到相同的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>

我的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

来自fine specification：

id = ID

元素的唯一标识符。

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

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

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

在您的页面中

。由于id s应该是唯一的，因此对id的DOM搜索通常只会找到第一个;你总是得到第一个微博的评论，并且当你有id个重复时，它会与预期的行为相符。

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

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

然后在链接中：

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

只有最后一篇文章的评论显示在弹出窗口（Ruby on Rails）

1 个答案: