切换 HTML 链接文本“显示/隐藏”以显示/隐藏内联表单以供评论；创建唯一标识符，以便并非所有评论链接都在页面上更改？

Question

在我的应用中，我有一个模型“cmets”，可以提交给问题、答案、解决方案或其他评论。

问题是，因为表单是部分的，并且应用程序使用 Jquery 切换来显示/隐藏表单，当它在页面上多次出现时（因为问题有答案，答案有 cmets，所以可以有 >=页面上有 3 个评论表单），按一个“添加评论”会将页面上的所有“添加评论”链接更改为“取消”，反之亦然。我该如何避免这种情况？

_comment.html.erb:

<li class="media comment comment-<%= comment.id %>">

  <%= render partial: "evaluations/vote_wrapper", locals: {voteable: comment} %>

  <div class="media-body">
    <div class="media-item-body">
      <strong>
        <%= render comment.user %>
      </strong>
       <br />
      <%= comment.brief %>
    </div>
    <% unless comment.commentable_type == 'Comment' then %>
      <ul class="media-list comments comment-comments">
        <% if comment.comments.count > 0 %>
        <%= render vote_order(comment.comments.includes(:user)) %>
        <% end %>
      </ul>
      <p class="reply comment">
        <%= link_to "Reply to comment", new_comment_comment_path(comment), remote: true %>
      </p>
      <p class="cancel reply" style="display:none">
        <%= link_to "Cancel", new_comment_comment_path(comment), remote: true %>
      </p>
    <% end %>
  </div>
</li>

new.js.erb 发表评论

var selector = ".<%= j @commentable.class.to_s.downcase + '-' + @commentable.id.to_s + '    .media-body ' %>"
selector2 = selector + ".<%= j @commentable.class.to_s.downcase %>-comments"

if($("p.add.comment").is(":visible")){ 
    if ($(selector2 + " .js-inline-form").length == 0) {
        $(selector2 )
        .append("<li class='js-inline-form'><%= j render :partial => 'comments/form' %></li>")
}
    else {
    $(selector2 + " .js-inline-form").remove()
    $(selector2) 
        .append("<li class='js-inline-form'><%= j render :partial => 'comments/form' %></li>")
    }
    $("p.add.comment").hide()
    $("p.cancel").show()
}
else if($("p.cancel").is(":visible")){
    $(selector2 + " li.js-inline-form").remove()
    $("p.cancel").hide()
    $("p.add.comment").show()
}
else if($("p.reply.comment").is(":visible")){ 
        if ($(selector2 + " .js-inline-form").length == 0) {
        $(selector2 )
        .append("<li class='js-inline-form'><%= j render :partial => 'comments/form' %></li>")
    }
    else {
        $(selector2 + " .js-inline-form").remove()
        $(selector2) 
        .append("<li class='js-inline-form'><%= j render :partial => 'comments/form' %></li>")
        }
        $("p.reply.comment").hide()
        $("p.cancel.reply").show()
}
else if($("p.cancel.reply").is(":visible")){
    $(selector2 + " li.js-inline-form").remove()
    $("p.cancel.reply").hide()
    $("p.reply.comment").show()
}

这部分_form为cmets：

<%= form_for(@comment, remote: true) do |f| %>
   .........
  <div class="field form-group">
    <%= f.label :brief %><br>
    <%= f.text_area :brief, class: "form-control" %>
    <% if user_signed_in? %>
    <%= hidden_field_tag :user_id, current_user.id %>
    <%= hidden_field_tag :commentable_id, @commentable.id %>
    <%= hidden_field_tag :commentable_type, @commentable.class %>
    <% end %>
  </div>
  <div class="actions">
    <%= f.submit 'Create Comment', :class => "btn btn-primary" %>
  </div>
<% end %>

在comments_controllernew 操作中：

def new
    @comment = @commentable.comments.new
    @comment.commentable_id = params[:commentable_id]
    render layout: "form_left"
end

和_answer.html.erb 显示再次使用 cmets 的位置：

 .....
 <p class="add comment">
    <%= link_to "Add comment", new_answer_comment_path(answer), remote: true %>
 </p>
 <p class="cancel" style="display:none">
    <%= link_to "Cancel", new_answer_comment_path(answer), remote: true %>
 </p>
</div>

如何使这些类独一无二，以便每次点击 link_to 时只会真正打开相关的评论表单？

谢谢。

Answer 1

类的目的是可重用性，如果你想要唯一，你可以使用 ID。我建议你遵循以下模式。

:id => "Identifier_ModelName_Id"

o/p => "Identifier_Question_15" 

这样您的 id 就不会与其他可评论内容发生冲突