0

各投稿の下にコメントがあります。すべての投稿とコメントは、リンク /users/username から見ることができます

ポップアップに 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>
4

1 に答える 1

0

細かい仕様から：

id = ID

要素の一意の識別子。

ドキュメント内に同じ id 値を持つ複数の要素があってはなりません。

複数の<div id="modal">要素があります:

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

あなたのページで。s は一意であると想定されているためid、 an の DOM 検索でidは通常、最初のものしか見つかりません。常に最初のマイクロポストのコメントを取得しており、これは s が重複している場合に予想される動作と一致しますid。

簡単な解決策はmicropost.id、 DOMに を含めることidです。

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

そして、リンクで：

<%= link_to "#modal-#{micropost.id}", :rel => "facebox-#{micropost.id}" do %>
  Comments
<% end %>
于 2013-03-14T23:39:14.223 に答える