Когда пользователь отправляет, как мы можем скрыть соответствующую форму?

<% @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 %> для уникальной идентификации каждой формы, чтобы скрылась только отправленная форма?

1
AnthonyGalli.com 7 Янв 2017 в 18:10

3 ответа

Лучший ответ

Наименьшее изменение в вашем коде для достижения вашей цели, вероятно, будет скрывать form, который является ближайшим Предок чтобы кнопка нажала:

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

В противном случае вы можете сгенерировать уникальные идентификаторы для пар форм и кнопок, проанализировать идентификатор в обработчике нажатий кнопок, отформатировать соответствующий идентификатор формы и найти соответствующую форму, чтобы скрыть ее.

1
Ferdinand Prantl 7 Янв 2017 в 15:18

Вы можете попробовать это:

$(document).ready(function(){
     $('.btn').click(function(){
       $(this).parents('form:eq(0)').toggle();
     });
});
1
Bharatsing Parmar 7 Янв 2017 в 15:26

Вы можете использовать .closest() метод, чтобы найти ближайшего предка form для .btn элемент:

$('.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>
1
Michał Perłakowski 7 Янв 2017 в 15:18