0

场景：一个帖子有很多评论。在帖子的索引页面中，当用户点击显示链接（link_to post）时，其评论将显示在帖子下方。

在这里，我使用 append() 添加评论： $('#edit_post_<%= @post.id %>').append('<%= j render "comments/comments" %>')因此，当用户单击显示链接时，评论将被加载并显示。

但是我怎样才能再次隐藏这些评论（即使评论可切换）？

帖子/索引

<h1>Posts</h1>
<% @posts.each do |post| %>
    <%= form_for post, remote: true do |f| %>
        <%=  post.content %>
        <div id="post_<%= post.id %>">
          <%= link_to "show", post, remote: true  %>
        </div>
    <% end %>
<% end %>

帖子/show.js.erb

$('#edit_post_<%= @post.id %>').append('<%= j render "comments/comments" %>')

评论/_comments.html.erb

<% @comments.each do |comment| %>
    <%= comment.content %>
<% end %>
4

1 回答 1

1

我想你没有新评论的事件绑定。

你应该使用类似的东西

$('.container-of-your-comments').on('click', '.the-toggle-button', function (e) {
  // toggle
});

所以切换适用于所有（以及未来）元素。

编辑：

鉴于问题的变化：如果切换意味着只是隐藏整个评论列表，您必须手动进行。

我建议你有单独的显示/隐藏按钮（你也可以在改变状态时显示和隐藏按钮），因为如果没有，它会变得更复杂。

例如，在帖子/索引中：

<h1>Posts</h1>
<% @posts.each do |post| %>
    <%= form_for post, remote: true do |f| %>
        <%=  post.content %>
        <div id="post_<%= post.id %>">
          <%= link_to "show", post, remote: true %>
        </div>

        <div class="post-comments" id="post_comments_<%= post.id %>">
        </div>
    <% end %>
<% end %>

在评论/_comments.html.erb

<% @comments.each do |comment| %>
    <%= comment.content %>
<% end %>
<%= link_to "hide", '#', class: "hide-comments"  %>

并在帖子/show.js.erb

$('#post_comments<%= @post.id %>').html('<%= j render "comments/comments" %>')

并在 assets/javascripts/posts.js 中（确保将其包含在 application.js 中）

$(document).ready(function() {
    $('.hide-comments').click(function(e) {
      e.preventDefault();
      $(this).parent().hide();
    });
});

主干.js 是一个很棒的工具，如果你要用这些评论做很多事情，比如 CRUD 等，你需要留在一个页面上 - 使用主干.js。如果没有，请坚持使用 jQuery。

于 2013-02-10T10:33:53.907 回答