リンクのある投稿のコメントを切り替える方法

Question

Facebookのように（Facebookの表示と非表示とは異なり）投稿のコメントを切り替えるには、単純なリンクを使用したいと思います。しかし、反復によって得られた自分のアプリケーション内の記事のリストされ、全ての投稿を明らかにすることができます：

1. は、他のすべての記事のコメントと同じidまたはclass

と共有 divで囲まれたコメントがあります

2. は一意id又は（例えば）を使用して生成classとdiv要素で囲まれたコメント投稿のid

を有します

最初のケースでは、リンクとそのidまたはclassを使用してjQueryと1つの投稿に属するコメントのみを切り替えることはできません。すべての投稿のコメントを切り替えます。しかし解決策があるかもしれません：リンクを忘れて、それを切り替えるには、コメントを含む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(); 
}); 

私はそれを実現する方法を知っているだろうか、それはそれを実現することが可能であるならば、それはjQueryのに情報を渡す方法ですが「で始まるすべて」、または特に約idの「約」のいずれかである。

Answer 1

あなたは私がやったことにかなり近いです。ただしそのようにリンクにバインドすることができます

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

Hereは、私はあなたがしたいと思うものの一例です。

この理由は、javacriptでコンテキストベースの変数であるthisを使用しているためです。この特定の場合、thisは、clickイベントをトリガーしたリンク要素を参照します。そこでそこから正しい周囲の要素にアクセスすることができますtoggle