如何在rails中实现像stackoverflow's ' add a comment '这样的功能'应

How to implement a function like stackoverflow's `add a comment` in Rails' app?

本文关键字：comment 功能 add 实现 stackoverflow rails      更新时间：2023-09-26

我正试图用Rails实现一个迷你SO，并在每个问题和答案下找到SO的add a comment，对我来说非常有趣和困难:

单击add a comment链接后，add a comment链接将隐藏，并显示textarea和submit的表单。

一开始，对于活动编号为47的问题，我使用如下代码片段来实现:

<div id="comments" class="comments">
     <button type="button" id="comment-btn-47">add a comment</button>
     <div id="new-comment-47" style="display:none">
        ...
     </div>
</div>

和点击add a comment时使用代码:

<% content_for :javascript  do%>
$("#comment-btn-47").click(function(){
   $("#new-comment-47").show(0, function(){
      $("#comment-btn-47").hide() });   
<% end %>
NOTE:here `47` is the answer activity No

在编写注释的内容并单击名为submit的按钮之后，保存和显示注释的最后一部分包括以下代码:

  $("#new-comment-47").hide();
  $("#comment-btn-47").show();

当一个问题没有答案时，它工作得很好，但当一个问题有一个或多个答案时，上述解决方案就失败了。经过简单的思考，我发现<% content_for :javascript do %> ... <% end %>需要一个更复杂的解析，例如，如果有一个问题的编号是47，对应的答案是74，那么在<% content_for :javascript do %> ... <% end %>中，我需要:

<% content_for :javascript  do%>
$("#comment-btn-47").click(function(){
   $("#new-comment-47").show(0, function(){
      $("#comment-btn-47").hide() });   
$("#comment-btn-74").click(function(){
   $("#new-comment-74").show(0, function(){
      $("#comment-btn-74").hide() });
<% end %>

显然，这不是一个解决方案，我该怎么办?关于javascript, rails或css，我错过了什么?提前感谢!

您的大多数困难是由于您滥用元素ID的事实。ID对于真正独特的元素来说是很好的，但仅仅使用ID会使编写良好的可重用代码或将javascript移出视图变得极其困难，因为它本来就没有位置。

$('.answer, .question').on('click', '.add-a-comment', function(){
  var $button = $(this);
  $button.hide(); // hide the button
  // go up to the parent question
  // and the look down to find form.
  $button.parents('.answer, .question') 
    .find('.comment-form').removeClass('hidden');
});
// Silly example of adding an event handler and traversing 
$('.answer, .question').on('submit', '.comment-form', function(){
  var $form = $(this); 
  var $comments = $form.parents('.answer, .question') 
    .find('.comments');
  $comments.append('<li>' + $form.find('textarea').val() + '</li>'); 
});
.hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
  <!-- ... -->
  <section class="comments-box">
     <p>Blablabla...?</p>
     <ul class="comments">
        <li class="comment">Say what?</li>
        <!-- ... -->
     </ul> 
     <p>
       <button type="button" class="add-a-comment">add a comment</button>
     </p>
     <form class="comment-form hidden">
        <input type="hidden" name="comment[question_id]" value="3">
        <textarea name="comment[body]"></textarea>
        <input type="submit" value="submit comment">
      </form>
  </section>
</div>
<div class="answerswer">
  <!-- ... -->
  <section class="comments-box">
     <p>Just add water</p>
     <ul class="comments">
        <li class="comment">This is silly.</li>
        <!-- ... -->
     </ul> 
     <p><button type="button" class="add-a-comment">add a comment</button></p>
     <form class="comment-form hidden">
        <input type="hidden" name="comment[answer_id]" value="5">
        <textarea name="comment[body]"></textarea>
        <input type="submit" value="submit comment">
      </form>
  </section>
</div>

相关文章：