如何使用链接切换帖子的评论

Question

我想像 Facebook 那样使用一个简单的链接来切换（与 Facebook 显示和隐藏不同）帖子的 cmets。但是，作为我的应用程序中通过迭代获得的帖子列表，每个帖子显然都可以：

1. 将 cmets 包含在 div 中，与所有其他帖子的 cmets 共享相同的 id 或 class

2. 将 cmets 包含在 div 元素中，并使用（例如）帖子的 id 生成唯一的 id 或 class

在第一种情况下，我不能使用链接及其id 或class 仅使用jQuery 切换属于一个帖子的cmets：我会切换所有帖子的cmets。不过可能有一个解决方案：忘记链接并使用包含 cmets 的 div 的父级 div 来切换它：

<div id="comments-parent">
  <%= link_to "Show/hide comments", "#", id="comments-link" %>
  <ol id="comments">
    <% post.comments.each do |comment| %>
      <li id="<% comment.id %>">
        <span class="comment-content"><%= comment.content %></span>
      </li>
    <% end %>
  </ol>
</div>

使用 jQuery 我可以做这样的事情：

$('#comments').hide();

$('#comments-parent').click(function() {
    $(this).children('#comments').toggle();
});

这个解决方案太可怕了……评论在一个很大的区域上被切换。
第二种情况，<ol id="comments-<%=post.id %>">，可能是解决方案：

$('#comments-all').hide();

$('#comment-link').click(function() {
    $('#comments-1').toggle();
});

但是我不知道如何实现它，或者如果有可能实现它，那就是如何将有关“所有ids以comments-开头”或最重要的是有关特定@的信息传递给jQuery 987654339@.

Answer 1

你已经非常接近我会做的事情了。但是，您可以像这样将其绑定到链接：

$('.toggleLink').on('click', function() {
    $(this).closest('.post').find('.comments').toggle();
});

Here 是我认为你想做的一个例子。

之所以可行，是因为使用了 this，它是 javascript 中基于上下文的变量。在这种特殊情况下，this 指的是触发点击事件的链接元素。所以从那里我们可以访问toggle的正确周围元素