Question

我正在尝试使用Rails实现一个迷你SO，并在每个问题下找到SO add a comment，对我来说非常有趣和难以回答：

点击add a comment链接后，系统会隐藏add a comment链接，系统会显示textarea和submit的表单。

一开始，对于活动No 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 %>需要更复杂的解决方案，例如，如果存在No 47的问题和No 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的内容？提前谢谢！

Answer 1

您的大部分困难都是因为您滥用元素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="answer">
  <!-- ... -->
  <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>

如何在Rails的应用程序中实现类似stackoverflow的“添加注释”这样的函数？

1 个答案: