提交時如何隱藏表格？

Question

當用戶提交時，我們如何隱藏各自的表單？

<% @challenge.dates_challenged.first(@challenge.days_challenged + @challenge.missed_days).each_with_index do |date, i| %>
 <div id="show-all-notes"> # upon submit the text appears here, javascript magic
 </div>
 <div class="notes-form-background">
   DAY <%= i + 1 %>
   <%= date.strftime("%b %d, %Y") %>
   <%= form_for [@notable, @note], remote: true do |f| %>
     <%= f.text_area :notes_text %>
     <%= f.submit, class: "btn" %>
   <% end %>
 </div>
<% end %>

 <script>
   $(document).ready(function(){
     $('.btn').click(function(){
       $('form').toggle();
     });
   });
 </script>

盡管有類似腳本的內容，但它刪除了表單的所有迭代，而不僅僅是提交的迭代。

也許可以使用Day <%= i + 1 %>來唯一地標識每個表單，以便僅隱藏提交的表單嗎？

Answer 1

為了實現目標，對代碼進行的最小更改可能是隱藏form ，該form是與所單擊按鈕最接近的祖先 ：

<script>
  $(document).ready(function(){
    $('.btn').click(function(){
      $(this).closest('form').hide();
    });
  });
</script>

否則，您可以為成對的表單和按鈕生成唯一的ID，在按鈕單擊處理程序中解析該ID，格式化相關的表單ID並找到要隱藏的相應表單。

Answer 2

您可以使用.closest()方法找到最接近.btn元素的form祖先：

$('.btn').click(function(){
  $(this).closest('form').toggle();
});

演示版

 $('.btn').click(function(){ $(this).closest('form').toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> form1 <button class="btn">Submit</button> </form> <form> form2 <button class="btn">Submit</button> </form> 

Answer 3

您可以嘗試以下方法：

$(document).ready(function(){
     $('.btn').click(function(){
       $(this).parents('form:eq(0)').toggle();
     });
});