Rails 5：divを1つの部分でレンダリングしようとしていますが、divクラスをユニークにして、すべての部分でJQueryが起動しないようにしてください。

Question

混乱しやすいタイトルです。

私は、コメントシステムのような赤いビットを少し実装しようとしています。あなたはPostを見て、それに多形であるCommentを追加することができます。または、別のCommentにコメントしてください。

そうのような私の見解に見える：あなたがコメントにコメントできるようにcomment_listの内部

<h2>Post:</h2> 
<div class="well"> 
    <p> 
    <strong>Title:</strong> 
    <%= @post.title %> 
    </p> 
<% if @post.description %> 
    <p> 
    <strong>Description:</strong> 
    <%= @post.description %> 
    </p> 
<% end %> 
</div> 

<% if current_user %> 
    <%= render "shared/comment_form" %> 
<% else %> 
    <p>Log in to add comments</p> 
<% end %> 

<% if @post.comments.any? %> 
    <%= render "shared/comment_list" %> # Another comment_form inside of this partial 
<% else %> 
    <p>No comments yet</p> 
<% end %> 

がcomment_formの別のレンダリングです：

最後に

<h2>Comments</h2> 
<ul> 
    <% @post.comments.each do |co| %> 
    <li><%= co.body %></li> 
    <%= render "shared/comment_form" if current_user %> 
    <% end %> 
</ul> 

、私のコメントフォーム自体：

<div id="comment-form" class="form-group"> 
    <%= form_for @comment, remote: true, url: post_comments_path(@post) do |f| %> 
    <%= f.text_area :body, required: true, rows: 5, class: "form-control" %> 
    <%= f.hidden_field :commentable_id, :value => @post.id %> 
    <%= f.hidden_field :commentable_type, :value => @post.class.name %> 
    <%= f.hidden_field :user_id, :value => current_user.id %> 
    <br> 
    <%= f.submit class: "btn btn-primary" %> 
    <% end %> 
</div> 
<span id="add-comment">Add a comment</span> 

そして、0123で動作するJqueryコード：

$(document).on('turbolinks:load', function() { 
    $("#comment-form").hide(); 
    $('#add-comment').click(function() { 
    $("#comment-form").fadeToggle("fast"); 
    ($("#add-comment").text() === "Cancel") ? $("#add-comment").text("Add comment") : $("#add-comment").text("Hide"); 
    }); 
}); 

私の質問は：

どのようにjQueryのid="comment-formのすべてのインスタンスで発生しませんように、私はこれらのdiv要素を分けるだろうか？私は<％= @ post.class.name％> <％= @ post.id％>のようなerbタグを渡したいと思いますが、再び変数をユニバーサルにしておきます。それでは、JQueryコードにその一意のID名を実装する方法を教えてください。

編集：私は自分の質問の一部を解決しました。誰もが見ることができなかったことの残りを残しました。

Answer 1

あなたはこのようprev()を使用することができます：あなたがここにこの動作を確認することができます

$(document).ready(function() { 
    $('.comment-form').hide(); 

    $('.add-comment').click(function(event) { 
    // Store the button which has just been clicked on a variable 
    var eventTarget = $(event.target); 

    // Find the previous element with the #comment-form and id and toggle it 
    eventTarget.prev('.comment-form').fadeToggle('fast'); 

    // Use the eventTarget Again 
    (eventTarget.text() === 'Cancel') ? eventTarget.text('Add comment') : eventTarget.text('Cancel'); 
    }); 
}); 

：http://codepen.io/rebagliatte/pen/MbKNJv