javascript - 我的显示/隐藏发生在所有循环结果中，而不是单击一次

Question

问题:单击时显示/隐藏 javascript 函数会打开所有 do 循环结果。我需要它只打开“编辑”所在/单击的一个结果。

表单文本字段将隐藏，直到单击“编辑”。该表可以有多个结果，因此当表确实有 2 个以上结果时，单击的“编辑”按钮适用于所有循环结果，而不仅仅是单击的结果。

html:

<div class="form-show"><a href="" id="form-show">Edit</a></div>

<div id="form-hide">
    <!--form and text_field-->
</div>

Javascript:

$(function() {
  $('a#form-show').click(function(event){
    event.preventDefault();
    $('div#form-hide').toggle();
  });
});

该形式是一个 do 循环(循环遍历结果)。

如何更改 JavaScript，以便当用户单击“编辑”时，只能编辑 1 个结果而不是所有结果？

整个表格:

<td class="center ">
  <div class="form-show"><%= user.field %>% <a href="" id="form-show">Edit</a></div>
      <div id="form-hide">
          <%= form_for user, remote: true do |f| %>
          <%= f.text_field :field, class: "form-cotrol" %>
          <%= f.button data: {confirm: "Are you sure?"}, class: "btn btn-light " do %>
             <i class="fa fa-pencil" aria-hidden="true"></i>
         <% end %>
      <% end %>
  </div>
</td>

Answer 1

只需使用 .next()查找下一个出现的可编辑 div:

$(function() {
  $('a#form-show').click(function(event){
    event.preventDefault();
    event.target.next($('div#form-hide')).toggle();
  });
});