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

Question

我想使用像Facebook这样的简单链接来切换（与Facebook显示并隐藏）帖子的评论。但是，作为迭代获得的应用程序中的帖子列表，每个帖子显然都可以：

1. 在div中附有评论，这些评论与所有其他帖子的评论相同id或class

2. 将评论附加在div元素中，其中使用（例如）帖子的id生成唯一class或id

   < / LI>

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

   div

   使用jQuery，我可以这样做：

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

   这个解决方案太可怕了......评论点击了一个非常大的区域。
   带有$('#comments').hide(); $('#comments-parent').click(function() { $(this).children('#comments').toggle(); }); 的第二种情况可能是解决方案：

   <ol id="comments-<%=post.id %>">

   但是我不知道如何实现它，或者是否有可能实现它，那就是如何向jQuery传递有关“所有$('#comments-all').hide(); $('#comment-link').click(function() { $('#comments-1').toggle(); }); 以ids开头”或更重要的信息关于特定的comments-。

Answer 1

你非常接近我的所作所为。但是，您可以将其绑定到链接，如下所示：

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

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

这可行的原因是由于使用this这是javascript中基于上下文的变量。在这种特殊情况下，this指的是触发click事件的link元素。因此，我们可以访问toggle

的正确周围元素